[Vuejs]-Vue.js | webpack :Cannot load the images in "assets" folder into the 'vue components'

by

3👍

✅

You need a loader that can handle images. url-loader works well compared to other loaders when utilizing babel-loader.

Adapted from the url-loader docs:

$ npm install url-loader --save-dev

Change the script tag of your Card.vue component:

<script>
import logo from '../assets/images/1.jpg';

export default {
    data() {
        return {
            logo
        }
    }
}
</script>

In the HTML of Card.vue:

<img :src="logo" class="card-img-top" alt="...">

Add the loader rule to your webpack.config.js:

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
          },
        ],
      },
    ],
  },
};
👤Sterling Beason

Leave a comment