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....

使用反应和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语句：

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>
    );
  }
}

Answer 4

更新：这只经过服务器端渲染测试（通用Javascript），这里是boilerplate。

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

这将 NOT 工作。：

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

您没有将图像嵌入到捆绑中。它们是通过浏览器调用的。所以它;

var imgSrc = './image/image1.jpg';

return <img src={imgSrc} />

Answer 6

这是代码

    import React, { Component } from 'react';
    import logo from './logo.svg';
    import './image.css';
    import Dropdown from 'react-dropdown';
    import axios from 'axios';

    let obj = {};

    class App extends Component {
      constructor(){
        super();
        this.state = {
          selectedFiles: []
        }
        this.fileUploadHandler = this.fileUploadHandler.bind(this);
      }

      fileUploadHandler(file){
        let selectedFiles_ = this.state.selectedFiles;
        selectedFiles_.push(file);
        this.setState({selectedFiles: selectedFiles_});
      }

      render() {
        let Images = this.state.selectedFiles.map(image => {
          <div className = "image_parent">

              <img src={require(image.src)}
              />
          </div>
        });

        return (
            <div className="image-upload images_main">

            <input type="file" onClick={this.fileUploadHandler}/>
            {Images}

            </div>
        );
      }
    }

    export default App;

动态添加图像React Webpack

6 个答案: