Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

386
Vistas
Image is not uploading in React. instead alt tag is showing

In my project i have make a main.jsx in which i provide image link and description in array of 3 item. then i take those to another component name Photo through Photowall.jsx . But image is showing of alt. not the imgaeLink

<figure className='figure'>
   <img src={post.imageLink} alt={post.description}/>
</figure>

my 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 Main

I have tried through url and through statis too but it doesnot work.

Photowall.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 Photowall

and photo.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 Photo

please checout this repo - https://github.com/mohitRana-04/Photowall

about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

The link you are passing is not a link to an Image instead it is a url to a page,

to get an Image link you have to right click and select Open image in new tab enter image description here

and after that you will see this url which is an actual link to image http://pm1.narvii.com/6439/ecfa73c34db4039a4dd92481ea16a180a18608ed_00.jpg

and this is an actual image link because it will have an extension of image at the end

I hope this will solve your problem :)

about 4 years ago · Juan Pablo Isaza Denunciar

0

Try copy image address and then paste it in the respective place .

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"}
]

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda