Vue : How to use v-bind on svg image?

user_16527606 0
Viewed 260

I tried to load a svg image on img tag in two ways. When I use the 1st way then it works well, but when I use the 2nd way then it doesn't work.

How to make the 2nd way(v-bind:) working well?

<template>
    <div>
        <img src="../../assets/ico_refresh-ccwb.svg"> <!-- 1st : working -->
        <img :src="imgSrc"> <!-- 2st : not working -->
    </div>
</template>

<script>
export default {
    data(){
        return{
            imgSrc : '../../assets/ico_refresh-ccwb.svg'
        }
    }
}
</script>
vue.js
1 Answers

@niddddddfier you need to prefix your imgSrc property with the require keyword. eg,

data(){
  return{
    imgSrc : require('../../assets/ico_refresh-ccwb.svg')
  }
}
user_50974930
Related