Ajouter Dynamiquement Des Images

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

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

dans le composant je sais que je peux ajouter require (image_path) pour une image spécifique en haut du fichier avant de créer le composant mais je veux rendre le composant générique, et il prennent une propriété du chemin de l'image qui est transmise à partir du composant parent.

ce que j'ai essayé est:

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

pour la propriété réelle j'ai essayé à peu près tous les chemins que je peux penser à l'image à partir de la racine du projet, à partir de l'application react root, et à partir du 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 les multiples de l'enfant...

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

est - ce qu'il y a un moyen de faire cela en utilisant react et webpack avec url-loader ou est-ce que je suis sur une mauvaise voie pour aborder cela?

54
demandé sur Damjan Pavlica 2015-09-16 18:31:36

7 réponses

utilisant un chargeur d'url, décrit ici https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html , vous pouvez alors utiliser dans votre code :

import LogoImg from 'YOUR_PATH/logo.png';

et

<img src={LogoImg}/>
85
répondu mlorber 2016-02-17 11:02:02

si vous regroupez votre code du côté du serveur, alors rien ne vous empêche d'exiger des actifs directement à partir de jsx:

<div>
  <h1>Image</h1>
  <img src={require('./assets/image.png')} />
</div>
12
répondu James Akwuh 2016-09-24 13:00:41

donc vous devez 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 des enfants:

class ChildClass extends Component {
  render() {
    return (
      <div>
          <img
            src={this.props.img}
          />
      </div>
    );
  }
}
5
répondu MCSLI 2016-06-16 07:42:12

vous n'intégrez pas les images dans le paquet. Ils sont appelés par le navigateur. Donc sa;

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

return <img src={imgSrc} />
4
répondu J. Mark Stevens 2015-09-16 16:21:01

mise à jour : ceci a seulement été testé avec le rendu côté serveur ( JavaScript universel ) voici mon boilerplate .

avec seulement file-loader vous pouvez charger des images dynamiquement - le truc est d'utiliser des chaînes de template ES6 pour que Webpack puisse le récupérer:

Ce sera PAS de travail. :

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

pour corriger cela, il suffit d'utiliser le modèle des cordes à la place :

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'
    }]
  }
}
4
répondu Marwen Trabelsi 2017-07-24 03:34:30

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
répondu Tayyeb Mehmood 2018-06-24 07:59:07

si vous cherchez un moyen d'importer toutes vos images 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)$/));

puis:

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

vous pouvez trouver le fil original ici: importer dynamiquement des images à partir d'un répertoire en utilisant webpack

0
répondu Gabriel Esu 2018-05-11 11:50:30