vue image变量无法使用

Question

vue

<img
   :src="'xxx/xx.png'"
/>

这样不行

<img
   src='xxx/xx.png'
/>

这样可以，
但是我要用变量，咋搞

Answer 1

用require
<img
   :src="require('xxx/xx.png')"
/>

或者

用require
<img
   :src="src"
/>

data() {
    return {
       src: require('xxx/xx.png')
    }
}

Answer 2

<img :src="imgSrc" />

// data 
imgSrc: require('./xx/xx.png')

Answer 3

<img :src="src" />

data() {
    return {
       src: 'xx/xx.png'
    }
}