Añadir Dinámicamente Imágenes React Webpack
He estado tratando de averiguar cómo agregar dinámicamente imágenes a través de React y Webpack. Tengo una carpeta de imágenes bajo src/images y un componente bajo src/componentes/index. Estoy usando url-loader con la siguiente configuración para webpack
{
test: /\.(png|jpg|)$/,
loader: 'url-loader?limit=200000'
}
Dentro del componente sé que puedo agregar require(image_path) para una imagen específica en la parte superior del archivo antes de crear el componente, pero quiero hacer que el componente sea genérico y que tome una propiedad con la ruta para la imagen que se pasa desde el componente padre.
Lo que he intentado es:
<img src={require(this.props.img)} />
Para la propiedad real he intentado casi todas las rutas que se me ocurren a la imagen desde la raíz del proyecto, desde la raíz de la aplicación react 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 hijo...
<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?
7 answers
Usando url-loader, descrito aquí https://christianalfoni.github.io/react-webpack-cookbook/Inlining-images.html , luego puede usar en su código :
import LogoImg from 'YOUR_PATH/logo.png';
Y
<img src={LogoImg}/>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-02-17 11:02:02
Si está agrupando 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>
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-09-24 13:00:41
Por lo tanto, debe agregar una instrucción import en su componente padre:
class ParentClass extends Component {
render() {
const img = require('../images/img.png');
return (
<div>
<ChildClass
img={img}
/>
</div>
);
}
}
Y en la clase hija:
class ChildClass extends Component {
render() {
return (
<div>
<img
src={this.props.img}
/>
</div>
);
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2016-06-16 07:42:12
No incrustar las imágenes en el paquete. Se llaman a través del navegador. Así que su;
var imgSrc = './image/image1.jpg';
return <img src={imgSrc} />
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2015-09-16 16:21:01
ACTUALIZACIÓN : esto solo se probó con renderizado del lado del servidor ( Javascript universal ) aquí está mi repetitivo.
Con solo file-loader puedes cargar imágenes dinámicamente - el truco es usar cadenas de plantillas ES6 para que Webpack pueda recogerlas:
Esto NO funcionará. :
const myImg = './cute.jpg'
<img src={require(myImg)} />
Para arreglar esto, simplemente 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'
}]
}
}
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2017-07-24 03:34:30
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;
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-06-24 07:59:07
Si está buscando una manera de importar todas sus imágenes desde 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']}/>
Puedes encontrar el hilo original aquí: Importa dinámicamente imágenes desde un directorio usando webpack
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/ajaxhispano.com/template/agent.layouts/content.php on line 61
2018-05-11 11:50:30