Ich habe versucht herauszufinden, wie Bilder über React und Webpack dynamisch hinzugefügt werden können. Ich habe einen Bildordner unter src / images und eine Komponente unter src / components / index . Ich verwende URL-Loader mit der folgenden Konfiguration für Webpack
{
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
Innerhalb der Komponente, von der ich weiß, dass ich require (image_path) für ein bestimmtes Bild oben in der Datei hinzufügen kann, bevor ich die Komponente erstelle, möchte ich die Komponente generisch machen und sie eine Eigenschaft mit dem Pfad für das Bild übernehmen lassen, von dem übergeben wird die übergeordnete Komponente.
Was ich versucht habe ist:
<img src={require(this.props.img)} />
Für die eigentliche Eigenschaft habe ich so ziemlich jeden Pfad ausprobiert, den ich mir aus dem Projektstamm, dem React-App-Stamm und der Komponente selbst vorstellen kann.
Dateisystem
|-- src
| ` app.js
| `--images
| ` image.jpg
| ` image.jpg
| `-- components
| `parent_component.js
| `child_component.js
Die übergeordnete Komponente ist im Grunde genommen nur ein Container, in dem mehrere ...
<ChildComponent img=data.img1 />
<ChildComponent img=data.img2 />
etc....
Gibt es eine Möglichkeit, dies mit React und Webpack mit URL-Loader zu tun, oder gehe ich einfach einen falschen Weg, um dies zu erreichen?
quelle
Wenn Sie Ihren Code auf der Serverseite bündeln, hindert Sie nichts daran, Assets direkt von jsx zu benötigen:
<div> <h1>Image</h1> <img src={require('./assets/image.png')} /> </div>
quelle
imageFilename
Requisite ab und benutze sie dann<img src={require(`./images/${imageFilename}`)} />
. Danke fürs Schreiben.images
Ordner zum endgültigen Bundle hinzufügt .const src = require(
Assets / Images / $ {Name}).default;
UPDATE : Dies wurde nur mit serverseitigem Rendering (Universal Javascript) getestet. Hier ist mein Boilerplate .
Mit nur File-Loader können Sie Bilder dynamisch laden. Der Trick besteht darin, ES6-Vorlagenzeichenfolgen zu verwenden, damit Webpack sie abrufen kann:
Dies wird NICHT funktionieren. ::
const myImg = './cute.jpg' <img src={require(myImg)} />
Um dies zu beheben, verwenden Sie stattdessen einfach Vorlagenzeichenfolgen:
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' }] } }
quelle
Wenn Sie nach einer Möglichkeit suchen, alle Ihre Bilder aus dem Bild zu importieren
// 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)$/));
Dann:
<img src={images['image-01.jpg']}/>
Den Original-Thread finden Sie hier: Importieren Sie Bilder mithilfe von Webpack dynamisch aus einem Verzeichnis
quelle
Sie müssen also eine Importanweisung für Ihre übergeordnete Komponente hinzufügen:
class ParentClass extends Component { render() { const img = require('../images/img.png'); return ( <div> <ChildClass img={img} /> </div> ); } }
und in der Kinderklasse:
class ChildClass extends Component { render() { return ( <div> <img src={this.props.img} /> </div> ); } }
quelle
Sie binden die Bilder nicht in das Bundle ein. Sie werden über den Browser aufgerufen. So ist es;
var imgSrc = './image/image1.jpg'; return <img src={imgSrc} />
quelle
Hier ist der 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;
quelle