Estoy tratando de representar varias imágenes de una matriz, pasadas a un componente "Imagen" como propiedad. Sin embargo, por alguna razón, las imágenes locales que me gustaría renderizar no aparecen. Si cargo una imagen alojada en una dirección web, esa imagen aparecerá , lo que indica que no hay nada de malo en que la propiedad "imageSource" se pase al componente Imagen. He intentado jugar con el formato fuente así:
let source = 'require(./img/' + props.imageSource + ")";o intentando:
<img src={{uri: source}} role="presentation" style={style.image} />... pero nada de lo que hago hace ninguna diferencia.
El componente es como se ve a continuación. Estoy totalmente atascado, ¡así que la ayuda sería muy apreciada!
import React from 'react'; let Image = function statelessFunctionComponentClass(props) { let source = './img/' + props.imageSource; const style = { image : { width: '400pt', height: '400pt' } } return ( <img src={source} role="presentation" style={style.image} /> ) } export default ImagePuede incluir la carpeta de imágenes creando un nuevo contexto con require.context(). Desde allí, puede acceder dinámicamente a la imagen que desee de esa carpeta y configurarla como src.
Saliendo de una estructura como esta:
APP ├──webpack.config.js ├──src ├──containers ├──YourContainer.js ├──components ├──YourComponent.js ├──public ├──bundle.js ├──images ├──dog.png ├──cat.pngEn YourContainer.js, desea crear un nuevo contexto para requerir ese directorio de imágenes
const images = require.context('../../public/images', true);A partir de ahí, puede hacer referencia a una imagen específicamente:
const dog = images('./dog.png');o dinámicamente:
let animal = images(`./${someVariable}.png`);Para obtener un ejemplo más completo, así es como puede hacerlo mientras itera sobre un objeto, usa las teclas para extraer su imagen y pasa eso como un accesorio de estilo a un componente secundario:
let YourContainer = ({ dispatch }) => { const data = projectData["projectData"]; // Require context image folder const images = require.context('../../public/images', true); return ( <div className="container-fluid"> <Row> { // Iterate over data object Object.keys(data).map((keyname, keyindex)=> { let code = data[keyname]["code"]; let title = data[keyname]["title"]; // Dynamically reference image // Set as inline style // Pass as prop to child let imgsrc = images(`./${code}.png`); let styler = { backgroundImage: `url(${imgsrc})` } return <YourComponent key={keyindex} title={title} style={styler} /> }) } </Row> </div> ) }Al ver que esta pregunta no ha sido respondida, y yo también estaba buscando la respuesta,
Encontré un ingenioso truco para cargar imágenes usando solo una URL
Suponiendo que está utilizando el complemento create-react-app
Puede usar la carpeta pública para renderizar imágenes dinámicamente
por ejemplo, si coloca una imagen con el nombre "image.jpg" en la carpeta pública de su aplicación de reacción.
puedes cargarlo haciendo lo siguiente
<img src={`${process.env.PUBLIC_URL}/image.jpg`} />Puede encontrar más información a continuación. https://create-react-app.dev/docs/using-the-public-folder
Mencione la ruta de la carpeta de imágenes donde tiene imágenes. He creado la carpeta en la carpeta 'SRC'. Así que mantengo mi código como a continuación.
let imágenes = require.context('../../../assets/images', true);
let itemImg = imágenes(`./${dynamicObject.photo}`).default;
el valor predeterminado es la palabra clave principal.