揭秘Vue.js轻松获取图片地址的5个实用技巧，告别繁琐代码！

技巧一：使用Vue的<img>标签直接绑定图片地址

<template>
  <img :src="imageUrl" alt="example image">
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'http://example.com/path/to/image.jpg'
    }
  }
}
</script>

技巧二：动态绑定背景图片

<template>
  <div :style="{'background-image': 'url(' + imageUrl + ')'}"> <!-- 这里是组件的内容 --></div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: ''
    }
  },
  mounted() {
    this.getImageUrl();
  },
  methods: {
    getImageUrl() {
      // 这里是获取图片地址的代码
      this.imageUrl = 'http://example.com/path/to/image.jpg';
    }
  }
}
</script>

技巧三：处理相对地址图片

const baseUrl = 'http://example.com';
const imageUrl = 'path/to/image.jpg';

const fullUrl = baseUrl + imageUrl;

然后，你可以将fullUrl绑定到<img>标签的src属性。

技巧四：使用JavaScript动态下载图片

function downloadImage(url) {
  var a = document.createElement("a");
  a.style.display = "none";
  a.href = url;
  a.download = new Date().getTime() + ".jpg";
  document.body.appendChild(a);
  a.click();
  a.parentNode.removeChild(a);
}

技巧五：使用Base64加密图片

const base64 = btoa(String.fromCharCode(...new Uint8Array(imageBlob)));

// 使用base64字符串