Bilder dynamisch hinzufügen Reagieren Sie auf Webpack

Ich habe versucht herauszufinden, wie Bilder über React und Webpack dynamisch hinzugefügt werden können. Ich habe einen Bildordner unter src / images und eine Komponente unter src / components / index . Ich verwende URL-Loader mit der folgenden Konfiguration für Webpack

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

Innerhalb der Komponente, von der ich weiß, dass ich require (image_path) für ein bestimmtes Bild oben in der Datei hinzufügen kann, bevor ich die Komponente erstelle, möchte ich die Komponente generisch machen und sie eine Eigenschaft mit dem Pfad für das Bild übernehmen lassen, von dem übergeben wird die übergeordnete Komponente.

Was ich versucht habe ist:

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

Für die eigentliche Eigenschaft habe ich so ziemlich jeden Pfad ausprobiert, den ich mir aus dem Projektstamm, dem React-App-Stamm und der Komponente selbst vorstellen kann.

Dateisystem

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

Die übergeordnete Komponente ist im Grunde genommen nur ein Container, in dem mehrere ...

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

Gibt es eine Möglichkeit, dies mit React und Webpack mit URL-Loader zu tun, oder gehe ich einfach einen falschen Weg, um dies zu erreichen?

Mit dem hier beschriebenen URL-Loader ( SurviveJS - Loading Images ) können Sie ihn dann in Ihrem Code verwenden:

import LogoImg from 'YOUR_PATH/logo.png';

und

<img src={LogoImg}/>

Bearbeiten: Eine Präzision, Bilder werden mit dieser Technik in das js-Archiv eingefügt. Es kann für kleine Bilder wertvoll sein, aber setzen Sie die Technik mit Bedacht ein.

Wenn Sie Ihren Code auf der Serverseite bündeln, hindert Sie nichts daran, Assets direkt von jsx zu benötigen:

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

UPDATE : Dies wurde nur mit serverseitigem Rendering (Universal Javascript) getestet. Hier ist mein Boilerplate .

Mit nur File-Loader können Sie Bilder dynamisch laden. Der Trick besteht darin, ES6-Vorlagenzeichenfolgen zu verwenden, damit Webpack sie abrufen kann:

Dies wird NICHT funktionieren. ::

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

Um dies zu beheben, verwenden Sie stattdessen einfach Vorlagenzeichenfolgen:

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

Wenn Sie nach einer Möglichkeit suchen, alle Ihre Bilder aus dem Bild zu importieren

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

Dann:

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

Den Original-Thread finden Sie hier: Importieren Sie Bilder mithilfe von Webpack dynamisch aus einem Verzeichnis

Sie müssen also eine Importanweisung für Ihre übergeordnete Komponente hinzufügen:

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

und in der Kinderklasse:

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

Sie binden die Bilder nicht in das Bundle ein. Sie werden über den Browser aufgerufen. So ist es;

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

return <img src={imgSrc} />

Hier ist der Code

    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;