CODEWITHSUNDEEP
javascriptreactjsreact-native
MOHIT RANA
MOHIT RANA

Reputation: 21

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

Upvotes: 1

Views: 63

Answers (2)

Hritik Sharma
Hritik Sharma

Reputation: 2020

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

Upvotes: 1

Pranav
Pranav

Reputation: 148

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 :)

Upvotes: 1

Related Questions