Reactjs local image not loading
问题描述:
我在我的reactjs文件中本地加载映像时遇到问题。任何帮助都是极好的。由于Reactjs local image not loading
无法编译 ./src/components/pages/home.js
模块未发现:在“C无法解析 '../Assets/images/Thomas-overlay3.jpg': \ Users \ tcmar \ Documents \ ThomasWebsite \ mywebsite \ src \ components \ pages'
此错误发生在构建时间期间,无法解除。
我的代码:
import React, { Component } from 'react';
class Home extends Component {
render() {
return (
<div className="container">
<div className="hero-image">
<img src={require('/src/Assets/images/Thomas-overlay3.jpg')} alt="hero-image" />
</div>
<div className="hero-text">
Hello, My Name is <span>Thomas</span>
</div>
</div>
);
}
}
export default Home;
答
你的资产应该在其中担任是服务器的一些public/
文件夹。
然后,你可以参考实际的资源:
...
<img src="/assets/my-image.jpg" />
...
或者,你可以使用webpacks file-loader
并加载它想:
<img src={require("file-loader!./file.png")} />
然而,这将加载该文件,并发出副本在公共文件夹中自动,如果这是你想要的。
您是否试图从'some-image.jpg'中导入图像?你能粘贴你的代码吗? – webdeb
我试图从我的资产/图像文件夹中导入图像 – Tom
您的期望是什么? – webdeb