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

Answer

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

Advertisement

Answer