reactjs - example - webpack file loader images

Añadir dinámicamente imágenes Reaccionar paquete web

Question

He estado tratando de descubrir cómo agregar dinámicamente imágenes a través de React y Webpack. Tengo una carpeta de imágenes en src / images y un componente en src / components / index . Estoy usando url-loader con la siguiente configuración para webpack

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

Dentro del componente que sé, puedo agregar require (image_path) para una imagen específica en la parte superior del archivo antes de crear el componente, pero quiero que el componente sea genérico y que tome una propiedad con la ruta de la imagen que se pasa El componente padre.

Lo que he intentado es:

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

Para la propiedad real, he intentado prácticamente todas las rutas que se me ocurren a la imagen desde la raíz del proyecto, desde la raíz de la aplicación de reacción y desde el componente en sí.

Sistema de archivos

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

El componente padre es básicamente solo un contenedor para contener múltiplos del niño, así que ...

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

¿Hay alguna manera de hacer esto usando react y webpack con url-loader o simplemente estoy yendo por un camino equivocado para abordar esto?

Answer 1

No incrusta las imágenes en el paquete. Se llaman a través del navegador. Entonces es;

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

return <img src={imgSrc} />

Answer 2

Por lo tanto, debe agregar una declaración de importación en su componente principal:

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

y en la clase infantil:

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

Answer 3

Si está buscando una manera de importar todas sus imágenes de la imagen

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

Entonces:

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

Puede encontrar el hilo original aquí: Importe dinámicamente imágenes desde un directorio usando webpack

Answer 4

Si está empaquetando su código en el lado del servidor, entonces no hay nada que le impida requerir activos directamente de jsx:

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

Answer 5

Usando url-loader, descrito aquí ( SurviveJS - Cargando imágenes ), puede usar en su código:

import LogoImg from ''YOUR_PATH/logo.png'';

y

<img src={LogoImg}/>

Editar: una precisión, las imágenes están en línea en el archivo js con esta técnica. Puede ser digno de imágenes pequeñas, pero use la técnica con prudencia.

Answer 6

aquí está el código

    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;

Answer 7

ACTUALIZACIÓN : esto solo se probó con la representación del lado del servidor (Javascript universal) aquí está mi boilerplate .

Con solo el cargador de archivos, puede cargar imágenes dinámicamente: el truco consiste en utilizar cadenas de plantilla ES6 para que Webpack pueda recogerlo:

Esto NO funcionará. :

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

Para solucionar esto, solo use cadenas de plantilla en su lugar:

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