dynamic添加图像React Webpack

我一直想弄清楚如何通过React和Webpackdynamic添加图片。 我在src / images下有一个image文件夹，在src / components / index下有一个组件。 我正在使用url-loader和下面的webpackconfiguration

{ test: /\.(png|jpg|)$/, loader: 'url-loader?limit=200000' } 

在组件中，我知道我可以添加要求（image_path）在文件顶部的特定图像在我创build组件之前，但我想使组件通用，并使其传递的图像的path父组件。

我所尝试的是：

 <img src={require(this.props.img)} /> 

对于实际的属性，我尝试了几乎所有可以从项目根目录，响应应用程序根目录以及组件本身获取的图像的path。

文件系统

 |-- src | ` app.js | `--images | ` image.jpg | ` image.jpg | `-- components | `parent_component.js | `child_component.js 

父组件基本上只是容纳多个孩子的容器，所以…

 <ChildComponent img=data.img1 /> <ChildComponent img=data.img2 /> etc.... 

有没有什么办法做到这一点使用反应和webpack与url-loader或我只是走错了path来接近呢？

Answer 1

使用url-loader，这里描述https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html ，然后你可以在你的代码中使用：

 import LogoImg from 'YOUR_PATH/logo.png'; 

和

 <img src={LogoImg}/> 

Answer 2

如果你在服务器端捆绑你的代码，那么没有任何东西可以阻止你直接从jsx获取资源：

 <div> <h1>Image</h1> <img src={require('./assets/image.png')} /> </div> 

Answer 3

所以你必须在你的父组件上添加一个import语句：

 class ParentClass extends Component { render() { const img = require('..http://img.dovov.comimg.png'); return ( <div> <ChildClass img={img} /> </div> ); } } 

并在小孩课上：

 class ChildClass extends Component { render() { return ( <div> <img src={this.props.img} /> </div> ); } } 

Answer 4

您不要将图像embedded到包中。 他们通过浏览器被调用。 所以就是;

 var imgSrc = './image/image1.jpg'; return <img src={imgSrc} /> 

Answer 5

更新 ：这只testing与服务器端渲染（通用JavaScript）这里是我的样板 。

只有文件加载器，您可以dynamic加载图像 – 诀窍是使用ES6模板string，以便Webpack可以拿起它：

这不会工作。 ：

 const myImg = './cute.jpg' <img src={require(myImg)} /> 

要解决这个问题，只需使用模板string：

 const myImg = './cute.jpg' <img src={require(`${myImg}`)} /> 

webpack.config.js：

 var HtmlWebpackPlugin = require('html-webpack-plugin') var ExtractTextWebpackPlugin = require('extract-text-webpack-plugin') module.exports = { entry : './src/app.js', output : { path : './dist', filename : 'app.bundle.js' }, plugins : [ new ExtractTextWebpackPlugin('app.bundle.css')], module : { rules : [{ test : /\.css$/, use : ExtractTextWebpackPlugin.extract({ fallback : 'style-loader', use: 'css-loader' }) },{ test: /\.js$/, exclude: /(node_modules)/, loader: 'babel-loader', query: { presets: ['react','es2015'] } },{ test : /\.jpg$/, exclude: /(node_modules)/, loader : 'file-loader' }] } }