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

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>

CodePudding user response：

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

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

CodePudding user response：

Try with require(), require() is not part of the standard JavaScript API. But in Node.js, it's a built-in function with a special purpose: to load modules.

<img :src="require(imgSrc)">