React.js上img的正确路径

2020/11/17 23:22 · javascript ·  · 0评论

我在React项目中的图片有问题。的确,我一直认为src属性的相对路径是建立在文件架构上的

这是我的文件架构:

components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

但是我意识到路径是建立在URL上的。在我的组件之一(例如到file1.jsx中)中,我有以下内容:

localhost/details/2
<img src="../img/myImage.png" /> -> works

localhost/details/2/id
<img src="../img/myImage.png" /> -> doesn't work, images are not displayed

如何解决这个问题?我希望在react-router处理的任何形式的路由中,所有图像都可以使用相同的路径显示。

您使用的是相对网址,相对于当前网址,而不是文件系统。您可以使用绝对网址来解决此问题

<img src ="http://localhost:3000/details/img/myImage.png" />

但这不适用于您部署到www.my-domain.bike或任何其他站点的情况。最好使用相对于网站根目录的网址

<img src="/details/img/myImage.png" />

create-react-app图像的相对路径中似乎不起作用。相反,您可以导入图像:

import logo from './logo.png' // relative path to image 

class Nav extends Component { 
    render() { 
        return ( 
            <img src={logo} alt={"logo"}/> 
        )  
    }
}

如果您使用create-react-app创建项目,则可以访问您的公用文件夹。因此,您需要将image文件夹添加到公用文件夹中。

公众/图片/

<img src="/images/logo.png" />

随着create-react-app公共文件夹(与index.html的...)。如果将“ myImage.png”放在此处,在img子文件夹下说,则可以通过以下方式访问它们:

<img src={window.location.origin + '/img/myImage.png'} />
  1. 在src(/ src / images)内创建一个图像文件夹,并将图像保留在其中。然后将此图像导入您的组件中(使用相对路径)。像下面一样

    import imageSrc from './images/image-name.jpg';

    然后在您的组件中。

    <img title="my-img" src={imageSrc} alt="my-img" />

  2. 另一种方法是将图像保留在公用文件夹中,并使用相对路径导入它们。为此,在公用文件夹中创建一个图像文件夹,并将图像保留在其中。然后在您的组件中使用它,如下所示。

    <img title="my-img" src='/images/my-image.jpg' alt="my-img" />

    两种方法都可以使用,但推荐第一种方法,因为它的更简洁的方式和图像在构建期间由webpack处理。

如果图像放置在“ src”文件夹中,请使用以下命令:

<img src={require('../logo.png')} alt="logo" className="brand-logo"/>

总而言之,有些较旧的答案行不通,有些则不错,但不会解释主题。

如果图片在“公共”目录中

例: \public\charts\a.png

在html中:

<img id="imglogo" src="/charts/logo.svg" />

在JavaScript中:

动态创建图像到新的img:

var img1 = document.createElement("img");  
img1.src = 'charts/a.png';  

将图片动态设置为ID为'img1'的现有img:

document.getElementById('img1').src = 'charts/a.png';

如果图片在“ src”目录中:

例: \src\logo.svg

在JavaScript中:

import logo from './logo.svg';  
img1.src = logo;  

在jsx中:

<img src={logo} /> 

按照官方用法说明文件加载器npm添加到webpack.config.js中,如下所示:

config.module.rules.push(
    {
        test: /\.(png|jpg|gif)$/,
        use: [
            {
                loader: 'file-loader',
                options: {}
            }
        ]
    }
);

为我工作。

将图像导入组件中

import RecentProjectImage_3 from '../../asset/image/recent-projects/latest_news_3.jpg'

并将图像src = {RecentProjectImage_3}上的图像名称作为对象调用

 <Img src={RecentProjectImage_3} alt="" />

一位朋友向我展示了如何执行以下操作:

当请求图像的文件(例如“ example.js”)与文件夹“ images”处于文件夹树结构内的同一级别时,“ ./”起作用。

将徽标放在您的公共文件夹中,例如public / img / logo.png下,然后将公共文件夹称为%PUBLIC_URL%:

<img src="%PUBLIC_URL%/img/logo.png"/>

上面的%PUBLIC_URL%的使用将public在构建期间替换为文件夹的URL 仅内的文件publicHTML只能引用文件夹中文件。

与“ /img/logo.png”或“ logo.png”不同,“%PUBLIC_URL%/ img / logo.png”将与客户端路由和非根公共URL一起正常使用。了解如何通过运行来配置非根公共URL npm run build

本文地址:http://javascript.askforanswer.com/react-jsshangimgdezhengquelujing.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!