Having issues with rendering my images on Nuxt framework

In the midst of configuring the routing for my Nuxt project, I've encountered challenges with nesting specific folders to achieve a route structure like this: "/PageAccueil/PricingPage/Checkout123".

The issue arises when attempting to place the "PricingPage" folder within the "PageAccueil" folder and then inserting the Checkout123.vue file inside it. Suddenly, all the images embedded in my component vanish. The console displays a 404 error indicating that the image cannot be located despite specifying the correct path.

Interestingly, I do not encounter this problem when using Google images, as Nuxt successfully retrieves them. It seems to have difficulty locating images stored locally on my machine.

If anyone has insights into what might be causing this dilemma, I would greatly appreciate your input. Just so you know, I am utilizing Nuxt 3.

@Robolivier, could you kindly weigh in on this issue?

Answer №1

For optimal organization, it is recommended to store static images in the /public directory and refer to them with absolute paths from there. Another option is to use the /assets directory and refer to them using ~/assets/...

To learn more, please refer to the documentation: https://nuxt.com/docs/getting-started/assets

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

Performing an AJAX request to a form within a CSS modal

Greetings from France, and please excuse any language errors in my English. I am currently coding in Symfony 3 and have an entity called "book" which can have different attributes (client, student, organizer, and/or speaker) based on the selected "type" a ...

Javascript is not fetching the value

Here is the code snippet I am working with: var categoryDetailId = $("#createEventForm-categoryDetail-idCategory").val(); and this link from my rendered page: After clicking the button, it returns NaN Update: I tried setting it manually, but it still ...

implementing dynamic navigation bar, when transforming into a dropdown menu using ReactJS

I am currently utilizing a navigation bar from a Bootstrap theme within my React project. The navigation bar includes an in-built media query that determines whether it should display as a dropdown menu or not, with a toggler to handle the dropdown functi ...

Unable to retrieve value 'includes' from null object

Currently, I am utilizing Vue.js along with JavaScript. In my code, there is an array of objects named products, each containing a special property called smallest_unit_barcode. My goal is to filter out only those products that have a barcode similar to a ...

timer-based user session expiration

Currently, the app I'm developing has a system where a session is created with a 15-minute expiration time once a user interacts with a form. This session is managed server-side. If the user remains idle for 15 minutes, the server returns a 404 erro ...

Tips on adjusting the hover color in the data grid

I want to adjust the color of the Datagrid when hovering over it, does anyone know how to do this? The default color displayed is light blue, but I would like to change it to a different color. Can someone please assist me with this? Looking for document ...

Do you want to reset the validation for the paper input?

I am encountering an issue with a paper-input element in my code. Here is what it looks like: <paper-input id="inputForValidation" required label="this input is manually validated" pattern="[a-zA-Z]*" error-message="letters only!"></paper-input&g ...

The screen should smoothly slide upwards when the keyboard pops up, ensuring the footer remains und

Hello! I am currently in the process of developing a mobile app using HTML, CSS, Bootstrap, and JavaScript. I have encountered a slight issue where the keyboard does not automatically pop up and move the screen up when the user taps on the textbox in the f ...

Playing a game of rock, paper, scissors with two players using JavaScript

Hello! I am a beginner in JavaScript and I am trying to create a simple rock, paper, scissors game. However, when I run the code, I receive two prompt messages and an error saying 'TypeError: playerOneChoice is not a function'. What mistake did I ...

Refreshing express-session sessions

My goal is to enhance the user experience by retrieving their profile from the mongodb database when they visit the page, and then updating their session with this information. Currently, I am utilizing the following packages for managing sessions: - ex ...

The Quivering Quandaries of Implementing Jquery Accordions

For a demonstration of the issue, please visit http://jsbin.com/omuqo. Upon opening a panel by clicking on the handle, there is a slight jitter in the panels below during the animation. In the provided demo, all panels should remain completely still as t ...

What is the best way to loop through arrays of objects within other arrays and delete specific attributes?

I have an array of JavaScript objects with potential children who share the same type as their parent. These children can also have their own set of children. My goal is to loop through all nodes and modify certain values. [ { "text": "Auto", ...

Tips for enabling editing on the result column by clicking the edit button

Each time I click on the Edit button, I want to be able to change the output in the column {{ test.result }} by turning it into an input element. This will allow me to update the numbers and then save them. Attached is a screenshot showing how the column ...

Learn the process of displaying and concealing elements when hovering over the parent element with Javascript

I am facing a challenge with my containing div that has a 'h1' title and a 'p' description inside it. My goal is to have the 'description paragraph' hidden while the 'title' is visible when the page loads, and to hav ...

Fade in and out of div elements upon clicking on an # anchor

I have been attempting to create a function where different divs fade in and out when clicking on an image with an <a href>. Unfortunately, I have not been successful in getting it to work despite several attempts. Here is the code that I am using: ...

Learn how to manipulate the DOM by dynamically creating elements and aligning them on the same line

Providing some context for my page: The section I have always contains a single input field. Below that, there is an "add" button which generates additional input fields. Since only one field is required on the screen, the following fields come with a "de ...

Encountered a problem when attempting to upload images to Cloudinary through the front-end and save the information in a MySQL database using Axios on Node JS

I am currently working on a web application using React. I have implemented a form where users can input text data and upload multiple image files. The goal is to store the submitted images on Cloudinary along with other text data in a MySQL database. Unf ...

Dynamic JavaScript Total Calculation

I have been struggling to update the total price for specific options. Even though the code was created by someone else and has worked fine for many users, I can't seem to make it work correctly. Any assistance would be greatly appreciated. Here is t ...

How can you substitute sections of a sentence with an array of strings?

I have a specific sentence that needs formatting: span class="searchmatch" Program /span, programme, programmer, or span class="searchmatch" programming /span may refer to: span class="searchmatch" Program /span management, th ...

Is there a way to redirect links within an iframe when a user decides to open them in a new tab?

I am currently developing a web application that allows users to access multiple services, such as Spark and others. When a user selects a service, like Spark for example, the app will open a new tab displaying my page (service.html) with user information ...