What could be the reason for my image not loading properly in Vue.js 3?

I'm struggling to load an image using a relative path and value binding with v-for in my template code. Despite following the correct syntax, the website is displaying an error indicating that it can't retrieve the image. Here's a snippet of the code:

            <Transition name="slide" v-for="Image in img4">
                <img :src="Image.image" alt="img" v-if="Image.imgindex == imgdex" class="img4">

And here's the dictionary:

img4: [{image: '../assets/img/item4/page1/img1.png', imgindex: 1}, {image: "../assets/img/item4/page1/img2.jpg", imgindex: 2}, {image: "../assets/img/item4/page1/img3.png", imgindex: 3}, {image: "../assets/img/item4/page1/img4.png", imgindex: 4}]

In theory, image 1 should be displayed if the variable 'imgdex' is set to 1. However, even after removing the v-if statement, the image still fails to load. The image files are not corrupted as changing them does not resolve the issue. Is there a solution to fix this problem? (Apologies for any obvious mistakes, I am new to Vuejs)

Edit: The error message in inspect mode reads 'GET http://localhost:8080/assets/img/item4/page1/img1.png [HTTP/1.1 404 Not Found 3ms]'

javascriptvue.jsvuejs3vue-component

Answer №1

Ah, the solution was simple! I just needed to include "require" in the image path.

[{image: require(`@/assets/img/item4/page1/img1.png`), imgindex: 1, alt: 'img1'}, {image: require(`@/assets/img/item4/page1/img2.jpg`), imgindex: 2, alt: 'img2'}, {image: require(`@/assets/img/item4/page1/img3.png`), imgindex: 3, alt: 'img3'}, {image: require(`@/assets/img/item4/page1/img4.png`), imgindex: 4, alt: 'img4'}]

I wasn't sure what "require" did, but it did the job!

Answer №2

Give this a shot!

(script addition)

const fetchImage = (path) => {
  return new URL(`../../assets/pictures/${path}`, import.meta.url).href
}

(Template in HTML)

                <img
                  :src="fetchImage(comment.userAvatarPath)"
                  class="userComment-header-img mx-2"
                  alt="User Profile Picture"
                />

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

PHP is adding unique characters like   into the database records

Description : Having an issue with adding a text to a content editable div. When clicking the button, I am trying to extract all the text from the div and send it to php successfully. However, when saving it to my database table, the text gets corrupted. A ...

javascriptphpjquerymysql

Managing Visual Studio Code Extension Intellisense: A Guide

I am looking to create an extension I recommend using "CompletionList" for users. Users can trigger completion by running "editor.action.triggerSuggest" The process of my extensions is as follows: Users input text If they press the "completion command," ...

javascripttypescriptvisual-studio-codevscode-extensions

Tool to stop automatic logouts on websites

In the web application where I work, users are automatically logged out after a period of inactivity. Unfortunately, I am unable to control this feature. The code responsible for logging the user out is as follows: var windoc = window.document; var timeou ...

javascriptbookmarklet

How does a JS event impact the state transition in a backend state machine built on Rails?

I am currently developing a new project where the backend involves Users who have multiple "Courses" each containing multiple "Steps". My goal is to create a JavaScript function that validates the user's answer. For example, if the user inputs "6", w ...

javascriptruby-on-railsrubyajaxstate-machine

The Best Way to Display Quad Wireframe in Three.js using OBJ Model

I am trying to display the wireframe of OBJ meshes using Three.js. However, Three.js can only render triangles, so I came up with the idea of creating a line for each edge of the model. After parsing the OBJ file and iterating through its vertices and fac ...

javascriptthree.js3d

Tips for creating dynamic alerts using mui v5 Snackbar

My goal is to call an API and perform several actions. After each action, I want to display the response in a Snackbar or alert. Despite iterating through the messages in a map, I'm only able to show the first response and none of the others. Here is ...

javascriptreactjstypescriptreact-hooksmaterial-ui

Scroll to the top of jQuery DataTables when clicking pages in a random order from the bottom to the top and

In my current project, I am working with jQuery Datatables and I need to customize its default behavior. Currently, when I navigate to page 61, the page scroll remains at the bottom of the page. However, if I then click on a lower page number like 60, th ...

javascriptjqueryhtmlcssdatatables

Guidelines for displaying a React component upon landing

I am a beginner in react app development and I am currently trying to add a component that loads when the app opens. However, I encountered an issue where the console displays the message Matched leaf route at location "/" does not have an elemen ...

javascriptreactjs

What is causing Flask to not maintain sessions when using VueJS with `npm run serve` frontend server?

I am currently working on a project that involves Flask and Rest-Plus on the backend, with VueJS frontend generated by VueCLI 3. One challenge I am facing is setting up sessions using Flask-Session. Unfortunately, session variables saved in one request ar ...

vue.jssessionflaskflask-restplus

A step-by-step guide on incorporating box-shadow for the jackColor in the Switchery Plugin

I am looking to add a box shadow to my iOS7 style switches for checkboxes when they are checked. Here is the code I have so far: var elems = Array.prototype.slice.call(document.querySelectorAll('.js-switch')); elems.forEach(function (html) { va ...

javascriptcssjquery-plugins

Making changes to a variable within a Service

Hey there! I've been stuck on this code all day and could really use some help. I have a simple textbox that interacts with a controller to update a variable inside a service (which will eventually handle data from elsewhere). Currently, I can retri ...

javascriptangularjs

Trigger the script upon clicking the Save button within the AdminBro Edit page

AdminBro's documentation mentions that they provide predefined actions Edit (record action) - update records in a resource They also offer a hook called after. I created a function and assigned it to MyResource.edit.after. However, the issue is tha ...

javascriptexpresshookadmin-bro

Utilize TypeScript to re-export lodash modules for enhanced functionality

In my TypeScript project, I am utilizing lodash along with typings for it. Additionally, I have a private npm module containing utilities that are utilized in various projects. This module exports methods such as: export * from './src/stringStuff&apo ...

javascriptnode.jstypescript

Is it possible to add items to a JS object that isn't an array?

Here is an example of the object I am working with: { "_id": "DEADBEEF", "_rev": "2-FEEDME", "name": "Jimmy Strawson", "link": "placeholder.txt", "entries": { "Foo": 0 } } To access this data in my JavaScript code, I use a $.getJSON call. ...

javascriptjqueryarraysnode.jsobject-literal

Updating Django database records with ajax

I'm currently working on a feature that involves filtering table data and updating the table using ajax. Here's what I have so far: Filter Form: <form id="search" method="POST" action="{% url 'article-filter' %}"> <input ...

javascripthtmldjangoajaxforms

Identify support for the :first-child pseudo-class

Is there a way to determine with JavaScript whether the browser is compatible with the CSS :first-child selector? ...

javascriptjquerycsscss-selectors

Determine if a Node.js Express promise holds any data

I'm looking for assistance with my nodejs application that returns a promise. What I need help with is figuring out how to determine if the result of this promise contains data or if it's just an empty array. I attempted using Object.keys(result) ...

javascriptnode.jsexpressrouterrequest-promise

Exploring Angular: How does Number.isNaN handle non-empty strings?

Within my component, there is a dropdown menu that allows users to choose a value. Upon selecting an item from the dropdown, a function called onDropdownChange is triggered. The parameter passed to this function can either be a string ("Please select an op ...

javascriptangular

Choose all the alternative A radio buttons utilizing JavaScript

If the "4 stars" option is selected at the top, I want all corresponding "4 stars" options in the form to be automatically selected. Similarly, if "3 stars" is chosen, I need all the "3 stars" options to be selected. I attempted to achieve this functionali ...

javascriptjqueryhtmlradio-buttonradio-group

Event triggered when a text input field becomes active (excluding onfocus) in the FireFox browser

I'm currently working on detecting when a text input field is active. Initially, I used the onfocus event, but I encountered an issue where the onblur event would be triggered when the window was no longer in focus, causing unintended consequences in ...

javascriptdomfirefox-addon-sdk