本文介绍了如何在React组件中导入图像(.svg,.png)的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试在我的一个反应组件中导入一个图像文件。我有web包的项目设置
I am trying to import an image file in one of my react component. I have the project setup with web pack
这是我的组件代码
import Diamond from '../../assets/linux_logo.jpg';
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
这是我的项目结构。
我已经设置了我的webpack.config.js以下列方式提交文件
I have setup my webpack.config.js file in the following way
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
PS。我可以从任何其他远程源获取图像,但不能从本地保存的图像。 JavaScript控制台也没有给我任何错误。请帮忙。我很反应,无法找到我做错的事。
PS. I can get image from any other remote source but not locally saved images. The JavaScript Console also doesn't give me any error. Please anything helps. I am quite new to react and unable to find what am I doing wrong.
推荐答案
尝试使用
import mainLogo from'./logoWhite.png';
//then in the render function of Jsx insert the mainLogo variable
class NavBar extends Component {
render() {
return (
<nav className="nav" style={nbStyle}>
<div className="container">
//right below here
<img src={mainLogo} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
这篇关于如何在React组件中导入图像(.svg,.png)的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!