Aggiungi Dynamic Image React Webpack

Ho cercato di capire come aggiungere dynamicmente le immagini tramite React e Webpack. Ho una cartella di immagini sotto src / images e un componente sotto src / components / index . Sto usando url-loader con la seguente configurazione per webpack

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

All’interno del componente so che posso aggiungere require (image_path) per un’immagine specifica nella parte superiore del file prima di creare il componente ma voglio rendere generico il componente e farlo prendere una proprietà con il percorso per l’immagine che viene passata da il componente genitore.

Quello che ho provato è:

  

Per la proprietà effettiva ho provato praticamente ogni percorso che posso pensare all’immagine dalla radice del progetto, dalla radice dell’app di reazione e dal componente stesso.

filesystem

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

Il componente genitore è fondamentalmente solo un contenitore per contenere multipli del bambino, quindi …

   etc.... 

C’è un modo per farlo usando react e webpack con url-loader o sto semplicemente seguendo un percorso sbagliato per avvicinarmi a questo?

Usando url-loader, descritto qui https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html , puoi quindi utilizzare il tuo codice:

 import LogoImg from 'YOUR_PATH/logo.png'; 

e

  

Se si raggruppa il codice sul lato server, non vi è nulla che impedisca di richiedere risorse direttamente da jsx:

 

Image

Quindi devi aggiungere una dichiarazione di importazione sul tuo componente genitore:

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

e nella class bambino:

 class ChildClass extends Component { render() { return ( 
); } }

Non incorporare le immagini nel pacchetto. Sono chiamati attraverso il browser. Così è;

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

AGGIORNAMENTO : questo solo testato con rendering lato server (Javascript universale) qui è il mio boilerplate .

Con il solo caricatore di file è ansible caricare le immagini in modo dinamico: il trucco è utilizzare le stringhe di modelli ES6 in modo che Webpack possa raccoglierlo:

Questo NON funzionerà. :

 const myImg = './cute.jpg'  

Per risolvere questo problema, usa invece le stringhe del modello:

 const myImg = './cute.jpg'  

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

Se stai cercando un modo per importare tutte le tue immagini dall’immagine

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

Poi:

  

Puoi trovare il thread originale qui: importa dynamicmente le immagini da una directory usando il webpack

ecco il codice

  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 => { 
}); return (
{Images}
); } } export default App;