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
JavaScript
x
4
1
<figure className='figure'>
2
<img src={post.imageLink} alt={post.description}/>
3
</figure>
4
my main.jsx –
JavaScript
1
36
36
1
import Header from './Header'
2
import Photowall from './Photowall'
3
4
const posts = [
5
{
6
id:"0",
7
description:"Konoha green beast",
8
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"
9
},
10
{
11
id:"1",
12
description:"again Uchiha",
13
imageLink:"tobi.png"
14
},
15
{
16
id:"2",
17
description:"rasenshuriken",
18
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"}
19
]
20
21
22
23
function Main() {
24
return (
25
26
<>
27
<Header title={"Photowall"} />
28
<Photowall posts = {posts}/>
29
30
31
</>
32
)
33
}
34
35
export default Main
36
I have tried through url and through statis too but it doesnot work.
Photowall.jsx
JavaScript
1
13
13
1
import React from 'react'
2
import Photo from './Photo'
3
4
function Photowall(props) {
5
return (
6
<div className='photo-grid'>
7
{props.posts.map((post,index) => <Photo key={index} post={post}/>)}
8
</div>
9
)
10
}
11
12
export default Photowall
13
and photo.jsx –
JavaScript
1
16
16
1
import React from 'react'
2
3
function Photo(props) {
4
const post = props.post
5
return (
6
<div>
7
<figure className='figure'>
8
<img src={post.imageLink} alt={post.description}/>
9
</figure>
10
11
</div>
12
)
13
}
14
15
export default Photo
16
please checout this repo – https://github.com/mohitRana-04/Photowall
Advertisement
Answer
Try copy image address and then paste it in the respective place .
JavaScript
1
18
18
1
const posts = [
2
{
3
id:"0",
4
description:"Konoha green beast",
5
imageLink:"should be a valid image link"
6
},
7
{
8
id:"1",
9
description:"again Uchiha",
10
imageLink:"should be valid image link"
11
},
12
{
13
id:"2",
14
description:"rasenshuriken",
15
imageLink:"should be a valid image link"}
16
]
17
18