vue.js 获取图片

在Vue.js中，获取图片通常涉及两个步骤：首先，你需要在HTML模板中引用图片，然后在JavaScript中处理可能的异步加载或错误情况。这里是一个基本的例子：

1. **在HTML模板中引用图片**:

<img :src="imageUrl" alt="Image Description" v-if="imageUrl">

这里`:src`是Vue绑定语法，当`imageUrl`变量有值时，图片会被显示出来。`v-if`用于条件渲染，防止未加载的图片显示占位符。

2. **在Vue组件内管理图片数据**:

export default {
  data() {
    return {
      imageUrl: '初始图片路径', // 或者一个空字符串、null
      imageLoaded: false, // 初始状态为未加载
    };
  },
  mounted() {
    this.getImage();
  },
  methods: {
    getImage() {
      const img = new Image(); // 创建一个新的Image对象
      img.src = this.imageUrl;
      img.onload = () => {
        this.imageLoaded = true; // 图片加载完成设置标志
      };
      img.onerror = () => {
        console.error('Failed to load image');
      };
    },
  },
};

当图片加载成功，`onload`事件触发，`imageLoaded`变为`true`；如果加载失败，则会触发`onerror`事件。

3. **异步获取图片url**:
如果图片url是从API或者其他远程源获取的，你可以将其放在一个异步函数中，等待获取结果后再赋值给`imageUrl`。

记得处理网络请求可能出现的错误，以及考虑懒加载策略，只在用户滚动到可视区域时才加载图片，提高用户体验。