[Vuejs]-How to display image url in vue.js

by

4👍

Usually, you will want to import the asset in your JS code. For example:

<template>
  <img :src="image" />
</template>

<script>
  import testImage from "@/assets/img/test.png"

  export default {
    image: testImage
  }
</script>
👤nVitius

3👍

Use the following:

<img :src="require(item.templateImg)">

When we are binding src to a variable, it is giving its raw value to the img tag, which means it’s expecting a full resource URL. It’s up to us to provide a complete data URL to that resource, which means creating a corresponding absolute resource URL out of the relative asset path that we’re using.

Thus, we need to fetch it using require(). If you are using an absolute path like a base64 data image URL, or compete image URLs, then in such cases you don’t need require(), and your current code will work just fine.

👤Beshambher Chaukhwan

Leave a comment