动态添加图像React Webpack

Question

我一直在试图弄清楚如何通过React和Webpack动态添加图像.我在src/images下有一个图像文件夹, 在src/components/index下有一个组件.我正在使用url-loader和webpack的以下配置

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

在我知道的组件中,我可以在创建组件之前为文件顶部的特定图像添加require(image_path),但是我想让组件成为通用的,并让它获取一个属性,其中包含从中传递的图像的路径父组件.

我试过的是:

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

对于实际属性,我已经尝试了几乎所有我能想到的项目根目录,反应应用程序根目录和组件本身的路径.

文件系统

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

父组件基本上只是一个容纳孩子倍数的容器,所以......

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

是否有任何方法可以使用react和webpack与url-loader进行此操作,或者我只是走错路来接近这个？

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 all images in image folder
function importAll(r) {
    let images = {};
    r.keys().map((item, index) => { images[item.replace('./', '')] = r(item); });
    return images;
}

const images = importAll(require.context('../images', false, /\.(gif|jpe?g|svg)$/));

然后：

<img src={images['image-01.jpg']}/>

您可以在此处找到原始线程：使用 webpack 从目录中动态导入图像

Answer 4

更新:这只测试了服务器端渲染(通用Javascript)这里是我的样板.

只有文件加载器,您可以动态加载图像 - 技巧是使用ES6模板字符串,以便Webpack可以选择它:

这将不工作.:

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

要解决此问题,只需使用模板字符串:

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'
    }]
  }
}

Answer 5

因此,您必须在父组件上添加import语句:

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

在儿童班:

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