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'),
        }
      }
}

版权声明：本文为博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。 原文链接