Javascript 如何在 React 组件中导入图像 (.svg, .png )
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/43823289/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to import image (.svg, .png ) in a React Component
提问by Shadid
I am trying to import an image file in one of my react component. I have the project setup with web pack
我正在尝试在我的反应组件之一中导入图像文件。我有使用 web pack 的项目设置
Here's my code for the component
这是我的组件代码
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>
)
}
}
Here's my project structure.
这是我的项目结构。
I have setup my webpack.config.js file in the following way
我已经按照以下方式设置了我的 webpack.config.js 文件
{
test: /\.(jpg|png|svg)$/,
loader: 'url-loader',
options: {
limit: 25000,
},
},
{
test: /\.(jpg|png|svg)$/,
loader: 'file-loader',
options: {
name: '[path][name].[hash].[ext]',
},
},
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.
附注。我可以从任何其他远程来源获取图像，但不能从本地保存的图像中获取。JavaScript 控制台也没有给我任何错误。请任何帮助。我对反应很陌生，无法找到我做错了什么。
回答by
try using
尝试使用
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>
);
}
}
回答by Hemadri Dasari
You can use require as well to render images like
您也可以使用 require 来渲染图像，例如
//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={require('./logoWhite.png')} style={nbStyle.logo} alt="fireSpot"/>
</div>
</nav>
);
}
}
回答by Rohith Murali
If the images are inside the src/assets folder you can use requirewith the correct path in the require statement,
如果图像在 src/assets 文件夹中，您可以require在 require 语句中使用正确的路径，
var Diamond = require('../../assets/linux_logo.jpg');
export class ItemCols extends Component {
render(){
return (
<div>
<section className="one-fourth" id="html">
<img src={Diamond} />
</section>
</div>
)
}
}
回答by Matiullah Mosazai
import React, {Component} from 'react';
import imagename from './imagename.png'; //image is in the current folder where the App.js exits
class App extends React. Component{
constructor(props){
super(props)
this.state={
imagesrc=imagename // as it is imported
}
}
render(){
return (
<ImageClass
src={this.state.imagesrc}
/>
);
}
}
class ImageClass extends React.Component{
render(){
return (
<img src={this.props.src} height='200px' width='100px' />
);
}
}
export default App;
回答by Andre
Solved the problem, when moved the folder with the image in src folder. Then I turned to the image (project created through "create-react-app")
let image = document.createElement("img");
image.src = require('../assets/police.png');
解决了在 src 文件夹中移动带有图像的文件夹时的问题。然后我转向图像（通过“create-react-app”创建的项目）
let image = document.createElement("img"); image.src = require('../assets/police.png');
