【 图片加载】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;