Question 42577 in Html Question posted in
Some basic documentation can be found here.

nextjs app not resolving/displaying custom icons – Html

I’m getting this lovely default icon when I try to use icons that I have loading into my source code:
enter image description here

I’m not sure what exactly I’m missing here. Here is the structure of my file tree:
enter image description here

Upon trying to use an icon (in this example, I’m trying to use Ellipse6.png), I call the source as "../style/assets/Ellipse6.png". Here’s a snippet of the code (in the index.jsx file) that I’m using it from:

            <div className="col-sm-6 pl-sm-2 pr-sm-0">
          <Card>
            <Card.Body>
            <Carousel className={"carousel"}>
              <Carousel.Item>
                <img
                  className="d-block w-100"
                  src='../style/assets/Ellipse 7.png'
                  alt="First slide"
                />
...

I swear that the import path is perfectly fine, and I don’t understand why .png would possibly not be supported. Is there something else I’m missing here?

Tags:

2

Answers


  1. 0

    I think you should store images and icons in the public folder instead of the styles folder. As the public folder is the place to store your images and icons.

    And use / in your route path .e.g. if you have assets folder containing icons folder in the public folder use /assets/icons/youricon.png. In your case, if you put your icons directly in the assets folder inside public folder.

    <img
 className="d-block w-100"
 src='/assets/Ellipse 7.png'
 alt="First slide"
/>

    You also may try navigation through public folder, as the following, but I advise to put your icons and images in public folder istead.

    <img
 className="d-block w-100"
 src='/../style/assets/Ellipse 7.png'
 alt="First slide"
/>
    Login or Signup to reply.
  2. 0

    Have you tried using the image name as /../style/assets/ellipse-7.png ? That could be the reason.

    If you are accessing the public folder, you should put / at the beginning.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search