Question 173198 in CSS Question posted in
Some basic documentation can be found here.

Css – Why I can't import the image inside a component Vue.js?

None of the methods placing the image as a tag or a background image works. Even though the path is correct. Written with the official docs. I’ve also tried installing vue-loader and giving a img src path, but it did’n help either.

https://stackblitz.com/edit/vue-fsg2l2?file=src%2Fcomponents%2FHeader.vue,src%2Frouter%2Findex.js,src%2Fviews%2FHome.vue,src%2Fviews%2FShops.vue,src%2FApp.vue,src%2Fcomponents%2FHelloWorld.vue

<template>
  <a href="#" class="header__top-item facebook" :style="image"> </a>
  <img alt="" src="../assets/icons/facebook-header.svg" />
  <img v-bind:src="require('../assets/icons/facebook-header.svg')" />
</template>

<script>
  data() {
    return {
      image: { backgroundImage: 'url(../assets/icons/facebook-header.svg)' },
    };
  }
</script>
Tags:

2

Answers


  1. 0

    In Vue.js, you can import and use images inside a component by using the require function or by importing the image directly.

    Try this:

    <template>
  <div>
    <img :src="require('@/assets/icons/facebook-header.svg')" alt="Facebook Icon" />
  </div>
</template>
    Login or Signup to reply.
  2. 0

    I think this should be simple, but I am facing some trouble on how to import and use an image in Vue single file component. Can someone help me how to do this?

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search