0
377
VistasLa imagen no se carga en React. en su lugar, se muestra la etiqueta alt
En mi proyecto, he creado un main.jsx en el que proporciono un enlace de imagen y una descripción en una matriz de 3 elementos. luego los llevo a otro nombre de componente Photo a través de Photowall.jsx. Pero la imagen muestra alt. no el imgaeLink
<figure className='figure'> <img src={post.imageLink} alt={post.description}/> </figure>mi main.jsx -
import Header from './Header' import Photowall from './Photowall' const posts = [ { id:"0", description:"Konoha green beast", imageLink:"https://www.google.com/imgres?imgurl=http%3A%2F%2Fpm1.narvii.com%2F6439%2Fecfa73c34db4039a4dd92481ea16a180a18608ed_00.jpg&imgrefurl=https%3A%2F%2Faminoapps.com%2Fc%2Fnaruto%2Fpage%2Fitem%2Fmight-guy%2FpP62_LZupInrJwxPJ6ljo7bjQGaD4JvLQW&tbnid=yS1-MAqQpVQZ2M&vet=12ahUKEwiW95Dlj9v2AhXpNbcAHXJGBZQQMygJegUIARDpAQ..i&docid=F6A5JxmHTsx4zM&w=400&h=300&q=guy%20sensei&ved=2ahUKEwiW95Dlj9v2AhXpNbcAHXJGBZQQMygJegUIARDpAQ" }, { id:"1", description:"again Uchiha", imageLink:"tobi.png" }, { id:"2", description:"rasenshuriken", imageLink:"https://www.google.com/imgres?imgurl=https%3A%2F%2Fstatic.wikia.nocookie.net%2Fnaruto%2Fimages%2Fd%2Fd6%2FNaruto_Part_I.png%2Frevision%2Flatest%3Fcb%3D20210223094656&imgrefurl=https%3A%2F%2Fnaruto.fandom.com%2Fwiki%2FNaruto_Uzumaki&tbnid=8EoJhgCyc-eLmM&vet=12ahUKEwiqtLyektv2AhX7yaACHVQOB34QMygBegUIARDVAQ..i&docid=WdjV5wKAFZeaKM&w=1440&h=1076&itg=1&q=naruto&hl=en&ved=2ahUKEwiqtLyektv2AhX7yaACHVQOB34QMygBegUIARDVAQ"} ] function Main() { return ( <> <Header title={"Photowall"} /> <Photowall posts = {posts}/> </> ) } export default MainLo he intentado a través de URL y también a través de estadísticas, pero no funciona.
Fotowall.jsx
import React from 'react' import Photo from './Photo' function Photowall(props) { return ( <div className='photo-grid'> {props.posts.map((post,index) => <Photo key={index} post={post}/>)} </div> ) } export default Photowally foto.jsx -
import React from 'react' function Photo(props) { const post = props.post return ( <div> <figure className='figure'> <img src={post.imageLink} alt={post.description}/> </figure> </div> ) } export default Photoconsulte este repositorio: https://github.com/mohitRana-04/Photowall
2 Respuestas
Responde la pregunta0
El enlace que está pasando no es un enlace a una imagen, sino una URL a una página,
para obtener un enlace de imagen, debe hacer clic derecho y seleccionar Open image in new tab 
y luego verás esta URL que es un enlace real a la imagen http://pm1.narvii.com/6439/ecfa73c34db4039a4dd92481ea16a180a18608ed_00.jpg
y este es un enlace de imagen real porque tendrá una extensión de imagen al final
Espero que esto resuelva tu problema :)
0
Intente copiar la dirección de la imagen y luego péguela en el lugar respectivo.
const posts = [ { id:"0", description:"Konoha green beast", imageLink:"should be a valid image link" }, { id:"1", description:"again Uchiha", imageLink:"should be valid image link" }, { id:"2", description:"rasenshuriken", imageLink:"should be a valid image link"} ]