Home > Software engineering >  image doesn't render react
image doesn't render react

Time:10-16

First of all I want to apologize for this dumb question, I'm a real beginner in webdev.

I'm trying to make a component of a clickable image that redirect us to another page of the website. I doesn't get any error but the image does not display (I have a ? on my webpage) and when I click on this "?" I'm not redirected at all.

Here is my component (in src/components/LinkPicture.js)

import { Link } from 'react-router-dom';

export default function LinkPicture(link, imgSrc) {
    return(
        <Link to={link}>
            <img src={imgSrc} />
        </Link>
    )
}

And here is my page component (in src/pages/intraje/Home.js, the image in src/assets/logo_SEIO_color_head.png)

import React from 'react'
import LinkPicture from '../../components/LinkPicture';
import logo from "../../assets/logo_SEIO_color_head.png"


const Home = () => {
    return (
        <div className='home'>
            <React.Fragment>
                <h1>Home</h1>
                <LinkPicture link={"intraje/profile"} imgSrc={logo}> </LinkPicture>
            </React.Fragment>
        </div>

    )
}

export default Home;

What are my errors ? thanks by advance :)

CodePudding user response:

import { Link } from 'react-router-dom';

export default function LinkPicture({link, imgSrc}) { // modification here
    return(
        <Link to={link}>
            <img src={imgSrc} />
        </Link>
    )
}

now your props are passed.

  • Related