Troubleshooting: Custom icons not displaying in Next.js application

Every time I attempt to use icons that I have loaded into my source code, I keep getting this default icon displayed:
https://i.sstatic.net/AWhcW.png

I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for reference:
https://i.sstatic.net/nHiyf.png

When attempting to utilize an icon (in this case, Ellipse6.png), I am referencing the source as "../style/assets/Ellipse6.png". Below is a snippet of the code (from index.jsx) where I am trying to use 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 can assure you that the import path is correct, and I am puzzled as to why .png files are not being supported. Is there something else that I might be overlooking?

htmlcssreactjsnext.js

Answer №1

In my opinion, it's best to keep your images and icons in the public folder rather than the styles folder. The public folder is specifically designed for storing images and icons.

When specifying the route path, make sure to use /. For example, if you have an assets folder with an icons subfolder in the public directory, use /assets/icons/youricon.png. If you place your icons directly in the assets folder within the public directory, the path would look like this:

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

Although you can navigate through the public folder using relative paths like the following code snippet, I recommend sticking to placing your icons and images directly in the public folder:

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

Answer №2

Perhaps you can attempt using the image name like /../style/assets/ellipse-7.png. This might resolve the issue.

When accessing the public directory, ensure to include / at the start of the path.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"How can we trigger a re-render of a React component once a promise is fulfilled? Is there a way to prevent rendering until the

Having attempted to make updates to a functional component that interfaces with an azure-devops-ui/Filter, I've encountered a situation where I am utilizing the azure-devops-extension-sdk to handle async responses. This component is intended to be use ...

javascriptnode.jsreactjstypescriptazure

Removing the rows that do not contain a table - nested div elements within other div elements

I am trying to create stripped rows with "complex" children, but I'm having trouble figuring out how to do it. I am using bootstrap, although I'm not sure if that makes any difference! This is what I have attempted so far: https://jsfiddle.net/ ...

htmlcssbootstrap-4css-selectors

Guide on routing error 500 globally to a specific page with React-Redux

Currently, I am utilizing the react-redux starter found at this link. I am seeking guidance on how to redirect all API 500 errors to a specific page. Can someone assist me with this? ...

reactjsexpressreact-reduxhttp-status-code-500

Using jQuery and JSON data to dynamically populate a second dropdown menu with filtered options

I am working on a form with two drop-down menus and a text box. The first drop-down contains static values, while the second drop-down is populated dynamically from a JSON array. My goal is to filter the options in the second drop-down based on the selecti ...

javascriptjqueryhtmljson

What is the best way to refresh data in a React component so that it displays the recently added data?

My website features a todo list that functions like this: Todo list Upon clicking the plus button, an input field appears allowing users to add items. Although the item is successfully added to the database, it does not immediately reflect on the webpage ...

javascriptmysqlreactjs

Is it possible to use CSS to target the nth-child while also excluding certain elements with

How can I create a clear break after visible div elements using pure CSS? Since there isn't a :visible selector in CSS, I attempted to assign a hidden class to the div elements that should be hidden. .box.hidden { background: red; } .box:not(.hid ...

jquerycss

Using Vuejs to dynamically render raw HTML links as <router-link> elements

Hey there, I'm just getting started with VueJS and I've been doing some interesting experiments. I created a backend service using Python/Flask that provides me with a string of HTML code containing many tags. My goal is to render this HTML insid ...

javascripthtmlvue.jsfrontend

Navigating dropdown list items using the keyboard in TypeScript is a breeze

I've encountered a bug while working on my open-source project. The issue is with navigating the dropdown list items using the keyboard (arrow key/tab). I have implemented the keyboard-navigation logic, but I'm unsure of how to make it work corre ...

htmlreactjstypescriptecmascript-2016

Getting IntelliJ to recognize the file organization of the Next.js `public` folder

In my development process, I am using IntelliJ to edit a Next.js website where I have the following versions: IntelliJ IDEA 2020.2.1 Next.js 9.5.3-canary.23 When it comes to the static file serving feature provided by Next.js, it utilizes a designated /p ...

intellij-ideanext.js

Transform the arrow function into a standard JavaScript function

Here is the React return code snippet I'm working with: return ( <div className='App'> <form onSubmit={this.submit.bind(this)}> <input value={this.state.input} onChange={(e) ...

javascriptreactjsarrow-functions

Submit Form using Ajax - Update text in HTML element upon click

As I am working on developing a message system, I encountered an issue where the message content is not opening correctly in my template when clicking the "See" button. My intention is to implement an Ajax call that will replace the content with jQuery .te ...

javascriptphpjqueryhtmlajax

What is the best way to display a React component upon clicking a Button?

Recently, I implemented a Nav bar button that triggers a drawer to open, providing information on various products and solutions. Currently, both the Navbar and Drawer exist within one component for functionality purposes in order to achieve my desired out ...

reactjsmaterial-uionclick

Is it possible to conceal the header and footer in NextJs solely on the SignIn and Register pages?

On some of my pages, I have chosen not to include the Header and footer that I've rendered on all other pages. Here is the code for my Layout.js file. Appreciate any help! * import React from "react"; import NavBar from "./NavBar" ...

reactjslayoutnext.js

What causes React to throw an Invalid hook call error?

import React, { useState } from 'react'; const ContactForm = () => { const [formData] = useState({ fullname: '', //More data here }); const handleFormSubmit = () => { // Some more Code }; return ( <> ...

reactjsreact-hooksreact-hook-form

Utilize HTML to place text above an image within a TextView

While working with a list of Strings that I add to TextViews individually, I encounter an issue with displaying images alongside the text. The HTML format allows me to include images within the text, but currently, the image appears below the text instea ...

javaandroidhtml

Is there a way for me to upload a csv file along with a password_hash

I have successfully implemented this code on my website, allowing me to upload CSV files to my database. However, I am looking to enhance the security measures by changing $item2 from a numerical password to a password_hash. ($data[1] currently represent ...

phphtml

Having trouble setting margin-bottom to 0 in react and antd - why won't it reset?

While practicing with React, I added <link rel="stylesheet" href="%PUBLIC_URL%/css/reset.css" /> to the head of index.html in order to reset the styles. However, I noticed that <h1> still had a margin-bottom:0.5em that I c ...

htmlcssreactjsfrontendantd

"Trouble arose when I tried to incorporate additional functions into my JavaScript code; my prompt feature is not

As a beginner in HTML and JS coding, I am working on creating a page that prompts user input for a name and then executes animations using radio buttons. However, after adding functions for radio button changes, my prompt is no longer functioning properly. ...

javascriptjqueryhtmlcss

What is the best method for updating the state of a dynamically created Switch component using React's setState()?

I have a dynamic creation of Switches based on a map like shown in the image: https://i.stack.imgur.com/jDLbS.png For example, using this code: const [enabled, setEnabled] = useState(false) return( ... {people.map((person) => ( ... ...

javascriptreactjsnext.jstailwind-ui

There appears to be a slight issue with the tailwind dark mode not fully extending when scrolling to the bottom of the page

While using dark mode in a Next.js web app with Tailwind, you may have noticed that when scrolling, if you go past the scroll container (almost as if you're bouncing off the bottom or top of the page), the dark mode doesn't extend all the way. In ...

cssnext.jstailwind-cssdarkmode