我在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'} />
-
在src(/ src / images)内创建一个图像文件夹,并将图像保留在其中。然后将此图像导入您的组件中(使用相对路径)。像下面一样
import imageSrc from './images/image-name.jpg';
然后在您的组件中。
<img title="my-img" src={imageSrc} alt="my-img" />
-
另一种方法是将图像保留在公用文件夹中,并使用相对路径导入它们。为此,在公用文件夹中创建一个图像文件夹,并将图像保留在其中。然后在您的组件中使用它,如下所示。
<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 。仅内的文件public
HTML只能引用文件夹中文件。
与“ /img/logo.png”或“ logo.png”不同,“%PUBLIC_URL%/ img / logo.png”将与客户端路由和非根公共URL一起正常使用。了解如何通过运行来配置非根公共URL npm run build
。
文章标签:javascript , reactjs , webpack
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!
评论已关闭!