I have a component at path root/src/components/component.tsx which loads a SVG file from the path root/src/resources/images/image.svg. Here is the relevant snippet; export default function BrandLogoSmall() { // eslint-disable-next-line @next/next/no-img-element return }When I run the project in dev mode, the image is broken with this error at the console; localhost/:1 GET http://localhost:3000/resources/images/logo-brand.svg 404 (Not Found)Can you give me some pointers to solve this issue? I can't find why does this happen.

I can't load SVG file with <img> element

Answered

Satin Angora posted this in #help-forum

Satin AngoraOP

2023-08-08T17:01:03.000Z

I have a component at path root/src/components/component.tsx which loads a SVG file from the path root/src/resources/images/image.svg. Here is the relevant snippet;

export default function BrandLogoSmall() {
  // eslint-disable-next-line @next/next/no-img-element
  return <img
    className="brand-logo-small"
    src="/resources/images/logo-brand.svg"
    alt="Brand Logo"
    role="img" />
}

When I run the project in dev mode, the image is broken with this error at the console;

localhost/:1     GET http://localhost:3000/resources/images/logo-brand.svg 404 (Not Found)

Can you give me some pointers to solve this issue? I can't find why does this happen.

Answered by Rafael Almeida

when using the img tag the src URL will be relative to your server address, so you need to serve them from the public folder otherwise they won't be visible to the internet

View full answer

10 Replies

Satin AngoraOP

2023-08-08T17:03:36.000Z

Edit: I tried using different paths like resources/..., ../resources/... etc.

Rafael Almeida

2023-08-08T17:11:36.000Z

when using the img tag the src URL will be relative to your server address, so you need to serve them from the public folder otherwise they won't be visible to the internet

Answer

Rafael Almeida

2023-08-08T17:12:05.000Z

if you want to use this path, you need to move the image to public/resources/images/logo-brand.svg

https://nextjs.org/docs/app/building-your-application/optimizing/static-assets

Satin AngoraOP

2023-08-08T17:14:02.000Z

Oh, I thought the public folder was optional with Next.js. Let me try to see if it fixes the problem.

TYSM @Rafael Almeida .

@Satin Angora Oh, I thought the `public` folder was optional with Next.js. Let me try to see if it fixes the problem.

Rafael Almeida

2023-08-08T17:18:43.000Z

if you use the Node import (import image from './image.png') then you don't need to use it since it automatically moves the images to the public folder, but it is still useful for other things and when you don't want to use the import

Satin AngoraOP

2023-08-08T17:21:14.000Z

I understand. But I noticed when I try using imported reference with native <img> element, it is shown as [Object object] and doesn't render.

Rafael Almeida

2023-08-08T17:22:47.000Z

ah yeah that's because the import returns an object with other stuff besides the URL (like the size of the image). the Image component accepts the object as the src but the img tag only accepts the actual URL string

@Satin Angora I understand. But I noticed when I try using imported reference with native `<img>` element, it is shown as `[Object object]` and doesn't render.

joulev

2023-08-09T02:54:03.000Z

import image from "./path/to/image.png"

<Image src={image} />
<img src={image.src} />