I'm storing the image src and alt in an array of objects. I'm passing each object as prop.
import React from 'react'
import { ImageBlock } from '../components/ImageBlock'
const LandingPage = () => {
const imageBlocks = [
{
src: "../assets/images/mobile/image-transform.jpg",
alt: "transform"
},
{
src: "../assets/images/mobile/image-stand-out.jpg",
alt: "stand out"
},
{
src: "../assets/images/mobile/image-graphic-design.jpg",
alt: "graphic design"
},
{
src: "../assets/images/mobile/image-photography.jpg",
alt: "photography"
}
]
return (
<div className="l-home-wrapper">
<ImageBlock image={imageBlocks[0]}/>
</div>
)
}
export default LandingPage
Then I'm trying to reference it in the ImageBlock component
import React from 'react'
export const ImageBlock = (props) => {
const image = props.image
return (
<img className="c-image-block" src={image.src} alt={image.alt}/>
)
}
It's not working. I have console logged const image and the directory comes through.
Can you please do the following. Please make sure imported images are in the correct directory.
import React from 'react';
import { ImageBlock } from '../components/ImageBlock';
import imageTransform from '../assets/images/mobile/image-transform.jpg';
import imageStandOut from '../assets/images/mobile/image-stand-out.jpg';
import imageGraphic from '../assets/images/mobile/image-graphic-design.jpg';
import imagePhoto from '../assets/images/mobile/image-photography.jpg';
const LandingPage = () => {
const imageBlocks = [
{
src: imageTransform,
alt: "transform"
},
{
src: imageStandOut,
alt: "stand out"
},
{
src: imageGraphic,
alt: "graphic design"
},
{
src: imagePhoto,
alt: "photography"
}
]
return (
<div className="l-home-wrapper">
<ImageBlock image={imageBlocks[0]}/>
</div>
)
}
export default LandingPage
And Then as you did
import React from 'react'
export const ImageBlock = (props) => {
const image = props.image
return (
<img className="c-image-block" src={image.src} alt={image.alt}/>
)
}