web-dev-qa-db-fra.com

Ajouter dynamiquement des images React Webpack

J'ai essayé de comprendre comment ajouter dynamiquement des images via React et Webpack. J'ai un dossier d'image sous src/images et un composant sous src/components/index. J'utilise url-loader avec la configuration suivante pour webpack

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

Dans le composant que je sais, je peux ajouter require (image_path) pour une image spécifique en haut du fichier avant de créer le composant, mais je souhaite que le composant soit générique et qu'il prenne une propriété avec le chemin. pour l'image transmise par le composant parent.

Ce que j'ai essayé, c'est:

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

Pour la propriété réelle, j'ai essayé à peu près tous les chemins auxquels je peux penser, allant de l'image depuis la racine du projet, depuis la racine de l'application rea et depuis le composant lui-même.

Système de fichiers

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

Le composant parent est fondamentalement juste un conteneur pour contenir des multiples de l'enfant, donc ...

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

Y a-t-il un moyen de faire cela en utilisant react et webpack avec url-loader ou suis-je simplement dans une mauvaise voie pour aborder ceci?

reactjswebpackimage-loadingurlloader
65
pandorz

En utilisant url-loader, décrit ici ( SurviveJS - Chargement des images ), vous pouvez ensuite utiliser dans votre code:

import LogoImg from 'YOUR_PATH/logo.png';

et

<img src={LogoImg}/>

Éditer: une précision, les images sont en ligne dans l'archive js avec cette technique. Cela peut valoir pour de petites images, mais utilisez la technique à bon escient.

89
mlorber

Si vous regroupez votre code côté serveur, rien ne vous empêche d’exiger des ressources directement de jsx:

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

UPDATE: ceci n’a été testé qu'avec le rendu côté serveur (Javascript universel), voici mon passe-partout .

Avec le chargeur de fichiers uniquement, vous pouvez charger des images de manière dynamique - L'astuce consiste à utiliser des chaînes de modèle ES6 pour que Webpack puisse les récupérer:

Cela ne fonctionnera pas PAS. :

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

Pour résoudre ce problème, utilisez plutôt des chaînes de modèle:

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'
    }]
  }
}
6
Marwen Trabelsi

Vous devez donc ajouter une déclaration d'importation sur votre composant parent:

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

et dans la classe enfant:

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

Vous n'incorporez pas les images dans le lot. Ils sont appelés via le navigateur. Alors c'est;

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

return <img src={imgSrc} />
4
J. Mark Stevens

Si vous cherchez un moyen d'importer toutes vos images à partir de l'image

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

Ensuite:

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

Vous pouvez trouver le fil original ici: Importer dynamiquement des images depuis un répertoire en utilisant webpack

2
Gabriel Esu

voici le 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;
1
Tayyeb Mehmood