【 图片加载】Vue前端各种图片引用

一、图片作为js常量（常作为配置项的值 ）

1、在线链接

img: 'https://g.alicdn.com/cm-design/arms-trace/1.0.155/styles/armsTrace/images/TAIR.png',

2、本地图片

方法一

<!-- 添加隐藏的img标签，用于加载本地图片 -->
<img id="car" style="display: none;" src="../../../../assets/images/car.png" />

img: document.getElementById("car").src,

方法二

import img001 from "@/assets/signBg/001.jpg"export default {name: 'Flow',data() {return {img001

img:  this.img001

方法三

export default {name: 'Flow',data() {return {     img001: require('./img/resistor/thumbnail.png'),

img:  this.img001

二、图片img标签

1、一般的src

<img id="car" style="display: none;" src="../../../../assets/images/car.png" />

2、动态的src用require

<img style="width: 9rem;height: 7rem"  :src="require(`../../assets/images/block${index}.png`)" alt="" />

3、src可以接收二进制文件blob（如后端返回的、a-upload传的图片)

<img :src="imageUrl"   width="100%"/>data() {return {     imageUrl:'',

getLocalImg(file){getBase64(file.originFileObj, (imageUrl) => {this.imageUrl = imageUrl})
},
getBase64(img, callback) {const reader = new FileReader()reader.addEventListener('load', () => {callback(reader.result)})reader.readAsDataURL(img)
},

三、背景图片

 background: url(~@/assets/images/map-input.png) no-repeat;background-size: 100% 100%;

 background: url(../../../assets/images/login_bg.jpg) no-repeat left center;