image doesn't render react

Question

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

Wrap the props as following: export default function LinkPicture({link,imgSrc}) its a component with props and you are passing arguments — Nacho
– Nacho, Commented Oct 15, 2021 at 19:55

taha maatof · Accepted Answer · 2021-10-15 20:05:39Z

3

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.

answered Oct 15, 2021 at 20:05

taha maatof

2,1854 gold badges11 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

image doesn't render react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related