reactjs - example - webpack file loader images

Añadir dinámicamente imágenes Reaccionar paquete web

Question

He estado tratando de descubrir cómo agregar dinámicamente imágenes a través de React y Webpack. Tengo una carpeta de imágenes en src / images y un componente en src / components / index . Estoy usando url-loader con la siguiente configuración para webpack

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

Dentro del componente que sé, puedo agregar require (image_path) para una imagen específica en la parte superior del archivo antes de crear el componente, pero quiero que el componente sea genérico y que tome una propiedad con la ruta de la imagen que se pasa El componente padre.

Lo que he intentado es:

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

Para la propiedad real, he intentado prácticamente todas las rutas que se me ocurren a la imagen desde la raíz del proyecto, desde la raíz de la aplicación de reacción y desde el componente en sí.

Sistema de archivos

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

El componente padre es básicamente solo un contenedor para contener múltiplos del niño, así que ...

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

¿Hay alguna manera de hacer esto usando react y webpack con url-loader o simplemente estoy yendo por un camino equivocado para abordar esto?

Answer 1

No incrusta las imágenes en el paquete. Se llaman a través del navegador. Entonces es;

var imgSrc = ''./image/image1.jpg'';
return <img src={imgSrc} />

Answer 2

Por lo tanto, debe agregar una declaración de importación en su componente principal:

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

y en la clase infantil:

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

Answer 3

Si está buscando una manera de importar todas sus imágenes de la imagen

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

Entonces:

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

Puede encontrar el hilo original aquí: Importe dinámicamente imágenes desde un directorio usando webpack

Answer 4

Si está empaquetando su código en el lado del servidor, entonces no hay nada que le impida requerir activos directamente de jsx:

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

Answer 5

Usando url-loader, descrito aquí ( SurviveJS - Cargando imágenes ), puede usar en su código:

import LogoImg from ''YOUR_PATH/logo.png'';

y

<img src={LogoImg}/>

Editar: una precisión, las imágenes están en línea en el archivo js con esta técnica. Puede ser digno de imágenes pequeñas, pero use la técnica con prudencia.

Answer 6

aquí está el código

 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;

Answer 7

ACTUALIZACIÓN : esto solo se probó con la representación del lado del servidor (Javascript universal) aquí está mi boilerplate .

Con solo el cargador de archivos, puede cargar imágenes dinámicamente: el truco consiste en utilizar cadenas de plantilla ES6 para que Webpack pueda recogerlo:

Esto NO funcionará. :

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

Para solucionar esto, solo use cadenas de plantilla en su lugar:

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