I am encountering problems with images that are imported as module imports in a Vue.js project

Question

I am encountering problems with images that are imported as module imports in a Vue.js project

Currently, I have stored all the default images for my Vue project in a designated folder. The path to this folder is

web/images/defaults/<imageNames>.png

. Instead of importing each image individually in my components, I wish to create a file that contains the image paths as constants which can then be imported.

I attempted the following:

import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

After creating this file, I tried to import it in my component like so:

import DEFAULT_IMAGES from '../../assets/images';

And then I attempted to use v-bind directive on the src attribute

<img :src="DEFAULT_IMAGES.imageName1" >

However, upon importing, it does not work as expected. Can someone help point out what mistake I might be making?

javascript vue.js webpack import es6-modules

Answer 1

Answer №1

After some investigation, I have uncovered the solution:

The issue stemmed from my incorrect path to access the images. Initially, I attempted to retrieve the images from the same folder using the following code snippet:

import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

However, what was missing was adding ./ before each image name as shown below:

import imageName1 from './imageName1.png';
import imageName2 from './imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

Answer 2

After some investigation, I have uncovered the solution:

The issue stemmed from my incorrect path to access the images. Initially, I attempted to retrieve the images from the same folder using the following code snippet:

import imageName1 from 'imageName1.png';
import imageName2 from 'imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

However, what was missing was adding ./ before each image name as shown below:

import imageName1 from './imageName1.png';
import imageName2 from './imageName2.png';

const DEFAULT_IMAGES = {
  imageName1:'imageName1',
  imageName2:'imageName2',
};

export default DEFAULT_IMAGES;

I am encountering problems with images that are imported as module imports in a Vue.js project

Answer №1

Similar questions

When making edits in VueJs, the textarea fails to display the saved data

The Material-ui paper component fails to display on the screen

Verify if item is currently on wishlist

Sending data from a JSP page to a JavaScript function

Creating a Breeze js entity using a JSON string and importing it into the breeze cache: A step-by-step guide

Compatibility of Typescript with local storage

When access to Ajax .responseText in an alert it can be displayed, however it cannot be stored in a variable or

What are the benefits of incorporating an external API with Next.js API routes?

Creating a diagonal effect on a table using jQuery

Verifying the execute boolean status or utilizing try/catch with PDO

Tips for retrieving the location of a draggable waypoint in the Google Directions output

Are Gatsby Server-Side Rendering APIs and Next.js SSR the equivalent in functionality?

Tips for generating documentation using markdown within the docs directory on GitHub with the help of JavaScript

Are you interested in using jQuery and/or AJAX to retrieve the latest images from a website?

Package that holds a custom wrapper for Webpack is failing to install required dependencies

Passing data in Angular 4 with eventEmitter across multiple layers of components

How come useEffect runs only once even when multiple states in the dependency array of useEffect change simultaneously?

Creative Blueprint

Vue Js: Creating an array of checkboxes

Tips for keeping MUI Autocomplete open even when the input field loses focus