Error message in the console regarding img src not able to load #743

NirachaMarchett · 2023-09-29T09:52:42Z

NirachaMarchett
Sep 29, 2023

Hi everyone,

I've been trying to make the image appears but keep getting the error message in the console. I double check path to the image file and it seems to be correct so I am not sure why the image still broken (see below). Could someone please help me fix this issue?

here is the error message;

and this is the codes:

import React from 'react';
import Head from 'next/head'
import { Inter } from 'next/font/google'
import styles from '@/styles/Home.module.css'
import Link from 'next/link'
import GameIcon from '../../public/assets/game-icon.png';

const inter = Inter({ subsets: ['latin'] })

export default function Home() {
  return (
    <>
      <Head>
        <title>Home page</title>
      </Head>
      <main className={`${styles.main} ${inter.className}`}>
        <div className={styles.welcomeText}>
          <p>
            Welcome to
          </p>
          <h2>
            PairLingo
          </h2>
        </div>
        <img src={GameIcon} alt='Home screen image' style={{ width: '200px', height: '200px', marginTop: '100px' }}/>
            <Link href="/player" className={styles.customLink}>START</Link>
      </main>
    </>
  )
}

here is the repository of the project
project

Thank you so much in advance.

Answered by moonwave99

Oct 2, 2023

Hey Niracha, good to se you again!

Since the img is already in the public folder, you can reference it directly as:

<img src="/assets/game-icon.png"/>

Even better, use the Image component from next/image.

Let us know if it works ^^

View full answer

moonwave99 · 2023-10-02T06:43:51Z

moonwave99
Oct 2, 2023

Hey Niracha, good to se you again!

Since the img is already in the public folder, you can reference it directly as:

<img src="/assets/game-icon.png"/>

Even better, use the Image component from next/image.

Let us know if it works ^^

1 reply

NirachaMarchett Oct 2, 2023
Author

Hi Diego, It works! thank you soo much! :)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

neuefische GmbH

Error message in the console regarding img src not able to load #743

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Replies: 1 comment 1 reply

{{title}}

{{title}}

Select a reply

neuefische GmbH

Error message in the console regarding img src not able to load #743

NirachaMarchett Sep 29, 2023

Replies: 1 comment · 1 reply

moonwave99 Oct 2, 2023

NirachaMarchett Oct 2, 2023 Author

NirachaMarchett
Sep 29, 2023

Replies: 1 comment 1 reply

moonwave99
Oct 2, 2023

NirachaMarchett Oct 2, 2023
Author