En React he almacenado imágenes en diferentes variables como
import Small from '../images/small.png' import Medium from '../images/medium.png'Y almaceno estas variables en un archivo data.js como
const Paper = [{ Head: "<strong>Heading Content</strong>sub-heading", content: ["Small","Medium"] },{ Head: "<strong>Heading Content 2</strong>sub-heading", content: ["Small","Medium"] }...]; Luego imprima estos datos en mi página Heading se imprime bien, pero las imágenes no se muestran:
{Head} {Paper.map((Paper,index) => ( <div className='news-papper'> <img className='images' src={images[index]} alt='ans-img'/> </div> )) }cómo imprimir la imagen de los datos JSON en reaccionar, soy nuevo en reaccionar.
Es mejor tener sus imágenes en su carpeta pública. Si construye su proyecto, la estructura de carpetas que ve durante el desarrollo ya no existirá porque todo está agrupado y minimizado. La única carpeta que permanecerá intacta es su carpeta pública. Si almacena sus imágenes allí, puede tener una subcarpeta y acceder a ella así
./<your_subfolder_name>/<your_image.extension>.Si usa una URL pública personalizada para su aplicación, también puede usarla así
`${process.env.PUBLIC_URL}/<your_subfolder>/<your_image.extension>`Hacer esto le permite pasar la ruta directamente a su atributo src de imagen.
Sin embargo, el problema aquí es su estructura. La matriz de imágenes no existe como puedo ver e incluso si existiera, su referencia a las imágenes es como cadenas.
Puedes probar una estructura como esta:
let data = [ { head: <strong>Content without quotation. It's JSX and it can be rendered as it is</strong>, imagePath: `${process.env.PUBLIC_URL}/my_image.png` } ]