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",
        textAlign: "center",
        fontColor: "#8d93ab"
    },

    Q3: {
        marginTop: "0",
        marginRight: "1rem",
        fontSize: "2.5rem",
        fontStyle: "oblique",
        fontWeight: "500",
        OverallHeight: "40%",
        textAlign: "center",
        fontColor: "#1d2d50",
        TextsToAnimate: ["View","Design","Customize","Create","Share"]

    },

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


};

现在我是我的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

阿克拉姆阿德尔

如果您使用create-react-app或正在使用webpack(或任何其他捆绑器,真的)创建您的反应应用程序,您可以修改您的常量文件以具有图像属性,如下所示:

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

然后在您的组件中,webpack将为处理相对路径

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章