❤ Vue工作常用的一些动态数据和方法处理

❤ Vue工作常用的一些动态数据和方法处理

（1）动态拼接相对路径结尾的svg

错误写法一 ❌

正确写法

<img :src="require(`@/assets//amazon/svg/homemenu${index}.svg`)" style="height: 20px;display: block;margin: 0 auto;margin-top: 12px;"/>

（2）动态拼接图片背景

第一种方式：推荐

background-size: cover;
    background-image:url('~@/assets/amazon/fukuan2.png');

第二种方式：

<div :style="{backgroundImage: 'url(' + require('@/assets/images/fukuan2.png') + ')' }"></div>

第三种方式：

<div :style="{backgroundImage: 'url(' + imgData + ')' }"></div>

import logo from '@/assets/images/logo.png'
data:{
	return:{
		imgData: logo
	}
}

第四种方式- img直接引入图片

① 

<img src="~@/assets/images/logo.png" alt="">

<img src="../../../../assets/images/logo.png" alt="">

②

<img :src="imgData" alt="">

③ 

<img :src="require('../../../../assets/images/logo.png')" alt="">