Tự động thêm hình ảnh React Webpack

Tôi đang cố gắng tìm ra cách thêm hình ảnh động thông qua React và Webpack. Tôi có một thư mục hình ảnh trong src / images và một thành phần trong src / components / index . Tôi đang sử dụng trình tải url với cấu hình sau cho gói web

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

Trong thành phần, tôi biết tôi có thể thêm request (image_path) cho một hình ảnh cụ thể ở đầu tệp trước khi tôi tạo thành phần nhưng tôi muốn tạo thành phần chung và để nó có thuộc tính với đường dẫn cho hình ảnh được chuyển từ thành phần cha.

Những gì tôi đã thử là:

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

Đối với thuộc tính thực tế, tôi đã thử khá nhiều đường dẫn mà tôi có thể nghĩ ra đến hình ảnh từ gốc dự án, từ gốc ứng dụng phản ứng và từ chính thành phần.

Hệ thống tập tin

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

Thành phần cha về cơ bản chỉ là một vùng chứa để chứa nhiều phần tử con nên ...

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

Có cách nào để thực hiện việc này bằng cách sử dụng react và webpack với url-loader hay tôi chỉ đi nhầm đường dẫn để tiếp cận điều này?

Sử dụng trình tải url, được mô tả ở đây ( SurviveJS - Đang tải hình ảnh ), sau đó bạn có thể sử dụng trong mã của mình:

import LogoImg from 'YOUR_PATH/logo.png';

và

<img src={LogoImg}/>

Chỉnh sửa: độ chính xác, hình ảnh được nội tuyến trong kho lưu trữ js bằng kỹ thuật này. Nó có thể xứng đáng với những hình ảnh nhỏ, nhưng hãy sử dụng kỹ thuật một cách khôn ngoan.

Nếu bạn đang nhóm mã của mình ở phía máy chủ, thì không có gì ngăn bạn yêu cầu nội dung trực tiếp từ jsx:

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

CẬP NHẬT : điều này chỉ được thử nghiệm với kết xuất phía máy chủ (Javascript phổ quát) đây là bản soạn thảo của tôi .

Chỉ với trình tải tệp, bạn có thể tải hình ảnh động - mẹo là sử dụng chuỗi mẫu ES6 để Webpack có thể nhận nó:

Điều này sẽ KHÔNG hoạt động. :

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

Để khắc phục điều này, chỉ cần sử dụng chuỗi mẫu thay thế:

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

Nếu bạn đang tìm cách nhập tất cả hình ảnh của mình từ hình ảnh

// 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)$/));

Sau đó:

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

Bạn có thể tìm thấy chuỗi gốc tại đây: Nhập động hình ảnh từ một thư mục bằng cách sử dụng webpack

Vì vậy, bạn phải thêm một câu lệnh nhập vào thành phần mẹ của mình:

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

và ở lớp trẻ:

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

Bạn không nhúng hình ảnh vào gói. Chúng được gọi thông qua trình duyệt. Vậy nó là;

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

return <img src={imgSrc} />

đây là mã

    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;