Passing props in react, image src not working

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.

from Recent Questions - Stack Overflow https://ift.tt/3BoGbYW
https://ift.tt/eA8V8J