Dynamicznie Dodaj obrazy Reaguj Webpack

Question

Próbowałem dowiedzieć się, jak dynamicznie dodawać obrazy za pośrednictwem React i Webpack. Mam folder obrazu pod src/images i komponent pod src/components/index. Używam url-ładowarka o następującej konfiguracji dla WebPacka

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

W ramach komponentu I wiem, że mogę dodać require (IMAGE_PATH) dla konkretnego obrazu w górnej części pliku przed utworzyć komponent ale Chcę, aby komponent był generyczny i musi mieć właściwość ze ścieżką dla obrazu przekazywanego z komponentu nadrzędnego.

Co Próbowałem to:

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

Do faktycznej własności próbowałem prawie każdą ścieżkę mogę myśleć, aby obraz z korzenia projektu, od reagowania aplikacji root, i ze składnika samo.

System plików

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

Komponent rodzic jest w zasadzie tylko pojemnik do przechowywania wielokrotności dziecka więc ...

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

Czy istnieje jakiś sposób, w jaki to zrobić przy użyciu reagować i WebPack z url-loader lub czy po prostu idę na złą ścieżkę, aby podejść do tego?

Answer 1

Korzystanie URL ładowarka, opisane tutaj https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html można następnie wykorzystać w kodzie:

import LogoImg from 'YOUR_PATH/logo.png'; 

i

<img src={LogoImg}/> 

Answer 2

Nie osadzasz obrazów w pakiecie. Są wywoływane przez przeglądarkę. Więc jest to;

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

return <img src={imgSrc} /> 

Answer 3

więc trzeba dodać instrukcję import na rodzica składnik:

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

aw klasie dziecko:

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

Answer 4

Jeśli łączenie kodu na stronie serwera, to nie ma nic Cię powstrzymuje od wymogu aktywa bezpośrednio od JSX:

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

Answer 5

UPDATE: to tylko testowane z renderowaniem po stronie serwera (uniwersalny Javascript) tutaj jest mój boilerplate.

Z tylko file-ładowarki można ładować obrazy dynamicznie - Sztuką jest wykorzystanie szablonu ES6 sznurki tak, że WebPACK można go podnieść:

Będzie to NIE pracy.:

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

Aby rozwiązać ten problem, wystarczy użyć ciągi szablonów Zamiast:

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