Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

378
Visualizações
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 Respostas
Responde à pergunta

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 Relatório

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 Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda