0
143
Vistasla imagen local no aparece usando require react js
Traté de obtener dinámicamente el directorio de las imágenes usando require pero no funciona
import React from 'react'; import './produto.css' function Produto({data}) { const { id, name, price, score, image } = data; return <div className = 'produto-card-container' key = {id}> <div className = 'produto-card-flex'> <img alt = {image} src = {require(`../../Assets/${image}`)}/> </div> </div> } export default Produto; pero en mi pagina aparece la imagen asi 
Traté de consolar la ruta y el nombre de la imagen para ver qué sucedió Mi registro de consola de la imagen const
super-mario-odyssey.png produto.js:8 call-of-duty-infinite-warfare.png produto.js:8 the-witcher-iii-wild-hunt.png produto.js:8 call-of-duty-wwii.png produto.js:8 mortal-kombat-xl.png produto.js:8 shards-of-darkness.png produto.js:8 terra-media-sombras-de-mordor.png produto.js:8 fifa-18.png produto.js:8 horizon-zero-dawn.png
·
Juan Pablo Isaza
2 Respuestas
Responde la pregunta0
Es necesario indicar el tipo de imagen. En tu caso, es un png.
<img alt = {image} src = {require(`../../Assets/${image}.png`)}/>
·
Juan Pablo Isaza
Denunciar
0
Recuerde que " requerir devuelve un objeto y la ruta de la imagen se puede expulsar de su propiedad predeterminada ".
Por lo que debes cambiar el siguiente código:
<img alt = {image} src = {require(`../../Assets/${image}`)}/>A :
<img alt={image} src={require(`../../Assets/${image}.png`).default}/>Nota : si desea utilizar formatos de imagen múltiple, agregue la clave imageFormat a su json db y pase su valor como accesorios.
{ ... image: 'assassins-creed', imageFormat : 'jpg' }Entonces, si haces eso, tu código debe ser como:
const {id, name, price, score, image, imageFormat} = data; <img alt={image} src={require(`../../Assets/${image}.${imageFormat}`).default}/>Buena suerte.
·
Juan Pablo Isaza
Denunciar
Responde la pregunta