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

Bug with IOS double tap on Element UI VueJS select input element

Encountering a strange problem on iOS safari or chrome. When attempting to select an option from a dropdown input, the options show up correctly on the first tap, but when trying to actually select an option, it requires two taps to work properly. This is ...

cssiosvue.jsmobile-safarielement-ui

Discovering the potential of utilizing an array transmitted by Node/Express on the server-side and integrating it into Google Maps on the client-side

When attempting to set up clustering markers on Google Maps, I encountered a challenge. Client-Side <script> // Code snippet from Google Map docs function initMap() { // Array of locations const locations = [ { lat: -31.56391, lng: 147.15 ...

javascriptnode.jsexpressgoogle-mapsejs

An easy guide to sorting outcomes using JSON

I have JSONResults in my Controller that contains all the data from a table. On the client's HTML detail view page, I am using JavaScript to fetch this data. How do I extract data from JSON where the client name is equal to klID (this is a JSON string ...

javascriptjsonapimodel-view-controllerfilter

Configuring properties of a child component in VueJS

Currently, I'm exploring the method of utilizing a Vue template as a Kendo UI template in their components. However, I found that there's a lack of clarity on how to provide properties to components rendered using this approach instead of directl ...

vue.jskendo-uikendo-ui-vue

Failing to hide a div on hover: Hoverintent's shortcomings

When I hover over the div with the unique identifier id="navbar", it doesn't seem to trigger any actions. I have included the following script in my document head: <script type="text/javascript" src="https://ajax.googleapi ...

javascripthtmljqueryhoverintent

Pass data in JSON format from Laravel controller to AngularJS

When working with Laravel, I successfully converted data in MySQL to JSON for use in AngularJS. However, I am now unsure of how to effectively utilize these values in AngularJS. Can anyone offer assistance? View output data (hide each value) Controller ...

javascriptphpmysqlangularjsjson

Modify the PrimeFaces dialog to be modal using client-side code

One of my primefaces dialogs is set up like this: <p:dialog widgetVar="dlg" width="320" height="220" modal="false" closable="false" showHeader="false" resizable="false" position="right,top"> I am looking to make this dialog modal if a certain eleme ...

javascriptprimefacesdialogmodal-dialogclient-side

The Material-UI selector isn't functioning properly for me

I recently tried to incorporate a material-ui selector example into my project by referring to the code fragment obtained from an example on Github. import React from "react"; import {withStyles} from "material-ui/styles"; import Select from "material-ui/ ...

javascriptreactjsmaterial-ui

Determining if the device orientation matches the given coordinates through a logical process

Exploring the capabilities of browser API's related to geolocation and device orientation. I'm wondering, if I have information on someone's orientation (like a compass angle from 0 to 360 degrees), is it feasible to determine if they are f ...

javascriptgeolocationdevice-orientation

Is there a way to determine the bounding rectangle of a specific word within a paragraph when you only have its index?

I am currently developing a text-to-speech functionality for a react application that can emphasize the word being spoken by highlighting it with a background color. This feature closely resembles the layout of the Firefox reader view. However, my curren ...

javascripthtmlcssreactjstext-to-speech

"Having trouble with sound in react-native-sound while playing audio on an Android AVD? Discover the solution to fix this

react-native-sound I attempted to manually configure react-native-sound but I am unable to hear any sound. The file was loaded successfully. The audio is playing, but the volume is not audible on Android AVD with react-native-sound. ...

javascriptreact-nativenpmaudioreact-native-sound

Combining Server-Side HTML with React Components and Functions: A Guide

Utilizing Vue makes it simple for me to incorporate a Vue application as a container above the server-side rendering HTML like so: <body> <div id="appMain"> <!-- This serves as the primary element for Vue --> <!-- ...

javascriptreactjsvue.js

Display the properties of the nested object

I am trying to extract and print the postal_code value from the JSON file provided below: { "results" : [ { "address_components" : [ { "long_name" : "286", "short_name" : "286", "t ...

javascriptjsonajax

Having trouble accessing cookies in JavaScript on Internet Explorer 11?

I am facing an issue with my Angular application where cookies are not being read properly in Internet Explorer 11. The JavaScript code works fine on Chrome, but IE seems to be having trouble accessing the cookie data even though it is visible in the devel ...

javascriptc#.netangularjscookies

SQL inputs with information that updates automatically / autofill SQL input boxes

Is it feasible to create a webpage that can connect to an SQL database, retrieve information from a table, and display it in a text box based on the input provided in another text box? Essentially, I am looking for a way to enable autofill functionality. I ...

phpjavascriptmysqlhtmlsql

What is the best way to send data back to a separate JavaScript file in ExtJS when working with records in a

I'm currently working on implementing a pop-up editing feature on a grid in extjs4. Progress so far includes successfully transferring the grid record to a popup panel located in a separate JavaScript file using the following code: handler: function( ...

javascriptextjsextjs4

Using node.js to parse an XML file from a URL and iterate through it to retrieve all the URLs contained within

I am currently utilizing the node module xml2js. The format of my xml file looks like this: <?xml version="1.0" encoding="UTF-8" ?> <?xml-stylesheet type="text/xsl"?> <?xml-stylesheet type="text/css" media="screen" href="some url" ?> ...

javascriptxmlnode.js

Tips for connecting a Django API project with a nodejs and react frontend

I'm currently working on a Django API project and I am considering incorporating Node.js into the mix. Additionally, I am interested in using React for the frontend of the application. Is this combination of technologies feasible? Would it be advisabl ...

javascriptpythonnode.jsdjangoreactjs

What methods can be used to monitor changes made to thumbnails on the YouTube platform?

I have embarked on a project to create a Chrome extension that alters the information displayed on the thumbnails of YouTube's recommended videos. In this case, I am looking to replace the video length with the name of the channel. Imagine you are on ...

javascripttypescriptgoogle-chromegoogle-chrome-extensionyoutube

Nodejs application encountering a problem with the findUser method in Active Directory

I have encountered an issue while using the activedirectory npm package with Nodejs v16.18.1. The code snippet below is used for authentication and finding user details: Could someone please assist with this? async authUserActiveDirectory(usernameAD: stri ...

javascriptnode.jsactive-directory