Can't add images to Vue.js component

Question

I'm new to Vue. I'm trying to add an image(svg/png) to a component but I keep getting this error. I'm new to it, please keep that in consideration.

Failed to compile.

./src/components/Overview.vue?vue&type=template&id=6408adae&scoped=true& (./node_modules/cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"06a978e8-vue-loader-template"}!./node_modules/vue-loader/lib/loaders/templateLoader.js??vue-loader-options!./node_modules/cache-loader/dist/cjs.js??ref--0-0!./node_modules/vue-loader/lib??vue-loader-options!./src/components/Overview.vue?vue&type=template&id=6408adae&scoped=true&) Module not found: Error: Can't resolve './assets/logo.png' in '/Users/kurbs/Desktop/Flaintweb2/flaintweb/src/components'

My code

<template>
  <div class="hello">
   <h1>Flaint</h1>
   <p>Flaint allows artists to create their virtual art gallery to showcase their paintings.</p>
   //Error <img src="./assets/logo.png">
  </div>

</template>

<script>
export default {
  name: 'Overview',

  props: {
    msg: String
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

You need to make sure the image exists and is in the correct location in your project files. — James Coyle
you can test with an image online ! to be sure it's not the problematic image path — user_1330
you can add a property in component data like image:require("./assets/img.jpg") and then bind it to image tag src like <img :src='image' />. — Mat J

Sergeon Sergeon · Accepted Answer · 2019-12-11T17:13:37

by passing a relative URL to the img tag, I think webpack is trying to handle the resource, thus generating an error because you don't have the proper loader.

Good news are, you don't really need a webpack loader. When you build the vue application, any resource under /public will be served as an asset.

So you can fix this by moving your image to public/assets, and then setting up your component's img as:

<img src="/assets/logo.png">

(I'm only used to vue-cli 3. I don't really know if assets handling changes from other versions of vue-cli)

Can't add images to Vue.js component

1 Answers