vue动态加载图片或者背景图的全套解决方案

vue动态加载src以及backgroundImage的终极解决方案

1.远程图片地址

<img :src="imgSrc " />
<div :style="{backgroundImage:url('+ imgSrc +')}"></div>
var imgSrc = "http://www.baidu.com/img.jpg""

2.本地图片地址

<img :src="imgSrc" />
<div :style="{backgroundImage:url('+ imgSrc +')}"></div>
var imgSrc = "require('@/assets/img/img.jpg')"

3.本地图片地址拼接变量

<img :src="require(`@/assets/img/${imgSrc}.jpg`)" />
<div :style="{'backgroundImage': 'url(' + require(`@/assets/img/${imgSrc}.jpg`) + ')'}">
var imgSrc = aaa