Vue not displaying local images

I'm having trouble creating an image gallery with Vue.js because local images are not loading. I have the src attributes set in the data attribute and can only load images from external sources. For example:

data() {

        return {
            images: [
              "../assets/images/photos/bathroom/bathroom-1.png",
              "https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg",
            ],
        };
    },

Despite the rest of my code working to scroll through the gallery, the first image is not loading while the second one does. I suspect it has something to do with how Vue compiles everything, as I am able to display the image statically using a regular img tag by setting the src manually.

javascriptvue.js

Answer №1

Remember to enclose any relative path within require().
For your scenario:

export default {
  data: () => ({
    images: [
      require("../assets/images/photos/bathroom/bathroom-1.png"),
      "https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg"
    ]
  })
}

See more information at: Vue Loader.

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

What is the best way to cycle through a JSON array of objects using JavaScript and jQuery?

Currently, my focus is on understanding JavaScript and JSON objects along with arrays. One of the tasks assigned to me involves iterating through the following array: {"6784": {"OD": [ { "od_id":"587641", ...

javascriptjqueryarraysjson

The progress bar in Next JS 13 seems to be malfunctioning and is not displaying any

After transitioning to the new Next JS 13 app directory, I encountered an issue where the progress bar at the top does not function when the page loads. In the previous version, Next JS 12, there was a package named nprogress and nextNprogress that simpli ...

javascriptreactjsnext.js

Using Knockout to bind an element to the selected value from a dropdown list

When using the following select, I am connecting it to an observable array. <select id="selectProtocols" data-bind="options: optionsAvailable, optionsCaption:'Selecione...', optionsText: 'SimpleDescription', optionsValue:'???&a ...

javascriptjqueryknockout.js

Could anyone clarify the workings of the async function in this specific useEffect situation?

Within a child component, there is an onClick event: onClick={()=>{ //2. an image is clicked, and the choice is added to the choiceOrder state, and then a jsonupdate is called -- 3. in ChooseBy.js //onclick, add or remove the choice choosebyprop ...

javascriptreactjsnext.js

"Enhance your web development skills by mastering jQuery alongside the

It's curious that jQuery doesn't support the use of the "+" sign. You can see how it functions with "1" and "3", but not with "2+". Just hover your mouse over each div to experience it. <div id="div-2+"></div> JSFiddle $('a. ...

javascriptjqueryhtmljquery-selectors

Launching the development server on a project created using Vue CLI 3

After successfully installing Vue CLI 3 globally on my Windows system using the command npm i -g @vue/cli, I proceeded to generate a project with the command vue create vue-project. I made sure to select all the necessary plugins as prompted during the se ...

webpackvue.jsvuejs2babeljsvue-cli

Steps for retrieving the identifier of a duplicated element

I've copied an element and changed their IDs, but I'm having trouble fetching the IDs of the cloned elements in jQuery. Can someone assist me with this issue? The HTML view source code is provided below: <table id="dataTable" borde ...

javascriptjqueryajaxasp.net-mvcentity-framework

What causes the immediate firing of the DOM callback in Angular 1.2.9?

Check out a live demo here View the source code on GitHub here Angular 1.2.9 brought in DOM callbacks with the introduction of $animate:before and $animate:after events triggered during animations. However, it seems that the $animate:after event is trigg ...

javascriptangularjsanimation

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

Guide to importing the Slider Component in React using Material-UI

I am trying to incorporate the Slider Component from @material-ui/core into my React project. However, when I attempt to import the Slider using this code: import Slider from '@material-ui/lab/Slider';, it gives me an error stating Module not fou ...

javascriptreactjsmaterial-ui

Freemarker substitute & and &ampersand;

I am facing an issue with Freemarker. I need to eliminate all the special characters from this sentence as well as from similar sentences in the future: BLA BLA RANDOM &, RANDOM BLA In particular, I want to remove the & character. The platform ...

javascripthtmlregexfreemarker

Accessing variables in AngularJS from one function to another function

I am facing an issue where I need to access a variable in one function from another function. My code structure is as follows: NOTE: The value for submitData.alcohol is obtained from elsewhere in my code. angular.module('app',['ui.router&a ...

javascriptangularjs

Having trouble getting a basic Vue 3 and Electron example to function properly?

I attempted to create a sample electron application using vuejs 3 on Debian Buster with node version v10.15.1. I roughly followed the instructions provided at https://github.com/nklayman/vue-cli-plugin-electron-builder: vue --version 3.6.3 vue create fr ...

vue.jselectronelectron-builder

Parsing of the module failed due to an unexpected character appearing when trying to insert a TTF file into the stylesheet

As a newcomer to Angular, I recently completed the tutorial and am now working on my first app. While trying to add an OTF file, everything went smoothly. However, when I made a change to my app.component.css file and included this code snippet: @font-fa ...

javascriptcssangulartruetype

When removing an item using its key, the vue component does not automatically refresh

I'm attempting to remove an object by its key and expecting the component to update accordingly using Vuex. Here is my current approach: The structure of my objects is as follows: 115:Object 116:Object I have the keys (115, 116) and I am t ...

vue.jsvuejs2vuex

What causes the undefined value of "this" in the Vue Composition API setup function?

A Vue component I've created is using v3's composition API: <template> <input type="checkbox" v-model="playing" id="playing" @input="$emit('play', $event.target.value)" /> <labe ...

javascriptvue.jsvuejs3vue-composition-api

Refresh a table using jQuery Mobile, PHP, and AJAX without having to reload the entire page by clicking a

Currently, I am working on a web app that includes a pop-up feature. When the user clicks on the pop-up to close it, I want the table data to refresh without having to reload the entire page. This pop-up allows users to modify existing data in the table. A ...

javascriptphpajaxjquery-mobile

`Gradient blending in ChartJS`

Currently, I am facing an issue with my line chart having 2 datasets filled with gradients that overlap, causing a significant color change in the 'bottom' dataset. Check out my Codepen for reference: https://codepen.io/SimeriaIonut/pen/ydjdLz ...

javascriptcsschart.js

Utilize Axios in Vue.js to fetch and process data from a REST API endpoint in C#

After successfully creating and deploying an API on Azure, I am trying to display the response in an alert box using javascript (Vue.js). The test method of my API returns the string "working". You can test the API here. This is the code snippet from my A ...

javascriptc#visual-studiovue.jsaxios

Repairing the Left-sided Popup Leaflet

Can someone help me with fixing the positioning of the Popup to the left of the map? Currently, it does not stay aligned to the left edge when moving the map. I tried using position: fixed in my styling, and while everything looks good when zooming, it br ...

javascriptcssreactjsleaflet