How to correctly load dynamic images in Vue.js?

Question

At the moment I'm just starting to learn Vue.js. I can't solve such a problem, when using "require()" an error appears: "Module not found: Error: Can't resolve". If I use static loading, then all images are loaded normally.

Static photo upload that works:

<template>
    <img :src="'../img/' + message.filename" alt="img"/>
</template>

Dynamic photo upload that doesn't work:

<template>
    <img :src="require('../img/' + message.filename)" alt="img"/>
</template>

Also tried:
"require('@/img/' + message.filename)" alt="img"/>
"require('@/assets/img/' + message.filename)" alt="img"/>

Folder structure:

/src
   /assets
      /img
         image_1.jpg
         image_2.jpg
   /resources
      /static
         /components
            App.vue
      main.js

Webpack.config.js

const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');

module.exports = {
  mode: 'development',
  devtool: 'source-map',
  entry: path.join(__dirname, 'src', 'main', 'resources', 'static', 'js', 'main.js'),
  devServer: {
    contentBase: './static',
    compress: true,
    port: 8000,
    allowedHosts: [
      'localhost:8080'
    ],
    stats: 'errors-only',
    clientLogLevel: 'error',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.css$/,
        use: [
            'vue-style-loader',
            'css-loader'
             ]
      }
    ]
  },
  plugins: [
    new VueLoaderPlugin()
  ],
  resolve: {
      modules: [
          path.join(__dirname, 'src', 'main', 'resources', 'static', 'js'),
          path.join(__dirname, 'node_modules'),
      ],
      extensions: ['.js']
  }
}

Mohamad Fashai · Accepted Answer · 2023-02-27 12:25:49Z

0

you should do this if your alias work good, in your data add this

imgSrc: '@/assets/img'

and your img

:src="imgSrc.concat('/'+message.filename)"

thats should work fine

answered Feb 27, 2023 at 12:25

Mohamad Fashai

565 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

NVY Over a year ago

Unfortunately, it doesn't work. Maybe I made mistake in webpack.config.js. But I did as in the documentation: webpack.js.org/configuration/resolve/#resolvemodules If I write without alias '../img', everything works, but without dynamic loading of images

Mohamad Fashai Over a year ago

use src instead of @ in imgSrc like this: imgSrc: src/assets/img

Mohamad Fashai Over a year ago

above all i offer you to use vite instead of webpack

NVY Over a year ago

src/assets/img doesnt work, and if I write this path in static loading, then this also does not work ... this is weird

Keanu1989 · Accepted Answer · 2023-02-27 13:01:50Z

I can't write comments yet, so I'll write it down here.

If your goal is to learn Vue, I'd take their recommended bundler. I have some basic experience with Rollup and Webpack. But Vite makes everything quite easy.

Vite is pretty straightforward, takes (almost) no configuration and imo is just awesome. If you have the free choice of which bundler to take, pick Vite. Especially if you just want to learn Vue.

https://vitejs.dev/guide/

# npm 6.x
npm create vite@latest my-vue-app --template vue

# npm 7+, extra double-dash is needed:
npm create vite@latest my-vue-app -- --template vue

After iniating the project, you'll get boilerplate code, which you can adapt to your needs. Vite's & Vue's documentation are pretty good. So for asset handling:

https://vitejs.dev/guide/assets.html Importing a static asset will return the resolved public URL when it is served:

import imgUrl from './img.png'
// For example, imgUrl will be /img.png during development, and become /assets/img.2d8efhg.png in the production build.

Collectives™ on Stack Overflow

How to correctly load dynamic images in Vue.js?

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related