首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >img在React.js上的正确路径

img在React.js上的正确路径
EN

Stack Overflow用户
提问于 2016-06-06 00:34:21
回答 9查看 430.5K关注 0票数 171

我对我的react项目中的图片有一些问题。实际上,我一直认为src属性的相对路径是建立在文件体系结构上的

下面是我的文件架构:

代码语言:javascript
复制
components
    file1.jsx
    file2.jsx
    file3.jsx
container
img
js 
... 

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

代码语言:javascript
复制
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处理的任何形式的路由中,所有图像都可以以相同的路径显示。

EN

回答 9

Stack Overflow用户

回答已采纳

发布于 2016-06-06 00:48:14

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

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

但是,当您部署到www.my-domain.bike或任何其他站点时,这并不是很好。最好是使用相对于站点根目录的url。

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

票数 88
EN

Stack Overflow用户

发布于 2016-10-10 01:24:10

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

代码语言:javascript
复制
import logo from './logo.png' // relative path to image 

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

Stack Overflow用户

发布于 2018-04-12 07:16:09

如果图像放在'src‘文件夹中,请使用以下方法:

代码语言:javascript
复制
<img src={require('../logo.png')} alt="logo" className="brand-logo"/>
票数 33
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/37644265

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档