ReactJS中图像的相对路径

如何解决ReactJS中图像的相对路径

我所有的常量都位于ConstantFiles/GlobalSiteConstants.js中。

文件如下所示：

const GlobalSiteConstants = {
    HeaderNames: [
        "Home","Login","Contribute","Feedback"
    ],Q1: {
        marginTop: "3rem",fontSize: "3rem",fontStyle: "auto",fontWeight: "700",OverallHeight: "40%",displayMessage:"Welcome to WebJsonify",textAlign: "center",fontColor: "#1d2d50"
    },Q2: {
        marginTop: "3rem",fontSize: "1.5rem",fontStyle: "italic",fontWeight: "300",OverallHeight: "20%",displayMessage:"Paper",fontColor: "#8d93ab"
    },Q3: {
        marginTop: "0",marginRight: "1rem",fontSize: "2.5rem",fontStyle: "oblique",fontWeight: "500",fontColor: "#1d2d50",TextsToAnimate: ["View","Design","Customize","Create","Share"]

    },FrontPageImageDetails: {
        FrontPageImageLocation: "./assets/images/welcomepage.png",FrontPageImageAlt: "Front Page Image: Not Able to Load"
    }


};

现在Ihis是我的app.js文件：

import React from 'react';
import './App.css';


import Header from './components/Header/Header';
import GlobalSiteConstants from './components/ConstantFiles/GlobalSiteConstants';
import {Descriptor,HeadersVu} from './components/Decorative_Components/decorationComps';

function App() {
  console.log(GlobalSiteConstants.FrontPageImageDetails.FrontPageImageLocation);
  return (
    <div>
    <Header HeaderNames = {GlobalSiteConstants.HeaderNames}/>
    <div>

    <Descriptor Q1 = {GlobalSiteConstants.Q1} />
    <Descriptor Q1 = {GlobalSiteConstants.Q2} />
    <HeadersVu Q1 = {GlobalSiteConstants.Q3} texts = {GlobalSiteConstants.Q3.TextsToAnimate}/>
    <img src = {GlobalSiteConstants.FrontPageImageDetails.FrontPageImageLocation} 
    alt = {GlobalSiteConstants.FrontPageImageDetails.FrontPageImageAlt}
    className = "ImageAnimationEffect"
    />

    </div>
    </div>
  );
}

export default App;

我正在尝试导入图像，但是显示相对路径问题。有人知道如何处理吗？我可以在相对路径上进行任何更改吗？

在控制台上记录路径，这是它记录的内容： ./assets/images/welcomepage.png

解决方法

如果您使用$pdo = new PDO("mysql:charset=utf8mb4;host=$servername;dbname=$dbname",$username,$password); $sql = "INSERT INTO orderitems (pid,name,style,weight,price,quantity) VALUES (:pid,:name,:style,:weight,:price,:quantity) "; $stmt= $pdo->prepare($sql); foreach ($order as $order) { $stmt->execute(array ( 'pid' => $order['id'],'name' => $order['name'],'style' => $order['style'],'weight' => $order['weight'],'price' => $order['price'],'quantity' => $order['quantity'] )); }创建了react应用，或者您正在使用create-react-app（或其他捆绑程序），则可以修改常量文件，使其具有image属性，如下所示：

webpack

然后在您的组件中，FrontPageImageDetails: { FrontPageImageLocation: require("./assets/images/welcomepage.png"),FrontPageImageAlt: "Front Page Image: Not Able to Load" }将为您处理相对路径