vue用变量代替图片src路径解决方案

vue用变量代替图片src路径3种解决方案

方法1：用网络图片直链

html

<template>
	<img :src='imgSrc'/>
</template>

js

export default {
      data(){
        return{
         imgSrc:'http://pic.qiantucdn.com/58pic/13/87/54/08q58PICPzB_1024.jpg',
        }
      }
}

方法2：important引入图片

html

<template>
	<img :src='imgSrc'/>
</template>

js

import imgUrl from '../../../../images/isok.png'
export default {
      data(){
        return{
         imgSrc:imgUrl
        }
      }
}

方法3：用require引入

html

<template>
	<img :src='imgSrc'/>
</template>

js

export default {
      data(){
        return{
         imgSrc:require('../../../../images/isok.png'),
        }
      }
}