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:

I'm uncertain about what exactly is causing this issue. Here is the layout of my file tree for reference:

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

Clicking the button to send the form using JavaScript

Currently, I am dealing with a shopping cart plugin that relies on a basic form on the product page to send values such as price and product name. However, I am facing an issue where this plugin uses a standard submit button to transmit the values, and I w ...

phpjavascripthtmlformswordpress

Leveraging API JSON information in conditional return statements with React

Working on a small Express/React app (not for production), I am validating a hashed pin in express and returning either message: false if validation fails or message: <cardnumber> if validation is successful. Currently, in my react frontend, I am try ...

javascriptreactjsexpress

Is it possible to access environmental variables configured in a Kubernetes pod's configmap within a React application?

I am working on a React application that accesses various API related environmental variables. When running the application locally or on a virtual machine, it successfully reads the API variables. If the variables are hardcoded directly into the React ...

reactjskubernetes

The SSR React application rendering process and asynchronous code execution

When using SSR with React, how is the content that will be sent to the client constructed? Is there a waiting period for async actions to finish? Does it wait for the state of all components in the tree to stabilize in some way? Will it pause for async ...

javascriptreactjsserver-side-rendering

React - utilizing dynamic properties using string values

I am facing a challenge in my test suite where I need to generate components with dynamic props. The desired components should look like this: <Button primary /> <Button secondary /> However, I am currently stuck at this point: [ &apos ...

javascriptreactjs

Ways to customize the appearance of a react-chartist component

I recently created a React JS component that utilizes the amazing react ChartistGraph component. However, I've run into an issue where the default CSS of ChartistGraph seems to be conflicting with my custom styling. While there is plenty of documentat ...

javascriptreactjsmaterial-uichartist.js

choose the li element that is located at the n-th position within

Need help with HTML code <div class="dotstyle"> <ul> <li class="current"><a href="javascript:void(0)"></a></li> <li><a href="javascript:void(0)"></a></li> <li><a href="javasc ...

javascripthtml

How to Customize Password Input Fields in HTML

My input field is set to password type, allowing only a six-digit number: <fieldset> <label for="password-input">Enter New Pin</label> <input type="password" name="password" id="password-input" inputmode="numeric" minlength="6" ...

htmlcssinput

experiencing difficulties in deploying GitHub repository using npm run deploy

Trying to deploy my GitHub repo but encountering an error when running npm run deploy. How can I resolve this? > [email protected] predeploy > npm run build > [email protected] build > vite build vite v5.1.1 building for productio ...

reactjsgitgithubnpmdeployment

Adjust the alignment of text to a precise vertical ratio of the image

Let's say I have this amazing logo with some artistic text in it that cannot be replicated using a downloaded WebFont In the image, the text baseline sits at 68% from the top and 32% from the bottom. Now I want to align text in an HTML document, whi ...

htmlcsstext-alignment

Transforming data from an HTML table into a MySQL database

Is there a way to transfer data from an HTML table created with JavaScript to a SQL database? I have been experimenting with the addRow(tableID) function but it doesn't seem to work. Any suggestions on how to solve this issue? Below is the code snipp ...

javascriptphphtmlmysqlsql

What is the best way to retrieve a variable that has been exported from a page and access it in _

Suppose this is my pages/visitor.tsx const PageQuery = 'my query'; const Visitor = () => { return <div>Hello, World!</div>; }; export default Visitor; How can I retrieve PageQuery in _app.tsx? One approach seems to be by assi ...

reactjstypescriptnext.js

Guide to setting up identically named properties in Child container components

As I am still fairly new to React and its concepts, I may not be executing this correctly. Although the question might seem lengthy, I'll try my best to keep it simple. I have created a component for TableHead that extends some material-ui components ...

reactjstypescriptreact-reduxmaterial-ui

Add CSS styling to a particular div element when a button is clicked

I have been working on a new feature that involves highlighting a div in a specific color and changing the mouse pointer to a hand cursor. I successfully achieved this by adding a CSS class: .changePointer:hover { cursor: pointer; background-color ...

cssangular

Utilizing react-query and next.js to pre-fetch initial data and automatically re-fetch when a filter is modified

In my NextJs project, I am attempting to prefetch data using react-query. The initial data should only be updated if the filter is modified. To manage the filter states, I have implemented State Hooks. function JobSearch(props) { const [pageNumber, setPa ...

javascriptreactjsreact-hooksnext.jsreact-query

Is there a method to identify the quantity of audio channels within a <video> element? (HTML5)

I would like to connect an AnalyserNode to each audio channel of a video element in order to perform audio visualization. Currently, my code is functioning properly except for the fact that both AudioContext and MediaElementAudioSourceNode consistently re ...

htmlaudiovideohtml5-video

Unable to locate babel loader in node_modules folder

Upon running npm install for react-facebook-login, an error arises: Failed to compile. ./node_modules/react-facebook-login/dist/facebook-login-with-button.js Module not found: Can't resolve 'C:\Users\ichen\Developer\plain&bs ...

reactjsnpmbabeljs

What method does the CSS standard dictate for measuring the width of an element?

In terms of measuring an element's width, Chrome appears to calculate it from the inner margin inclusive of padding. On the other hand, Firefox and IE determine the width of the box from the border, excluding padding but including the margin. Personal ...

cssinternet-explorerfirefoxgoogle-chromespecifications

Grid system not being followed by table in Bootstrap layout

I'm struggling to figure out why the table I have doesn't follow Bootstrap's grid system. It took me a good 2 hours to pinpoint and fix the issue. Any help would be greatly appreciated. I could share the code, but it might be easier for you ...

htmlcsstwitter-bootstrap

Steps to replenish the firebase cacheHere's how you

I'm encountering an issue with my Next.js project, specifically a Next.js website hosted on Google Firebase. I am utilizing Google Cloud Functions to run this website. I am interested in implementing cache for better performance. It is my understandi ...

firebasecachingnext.jsgoogle-cloud-functions