Vue3 动态导入项目内部的图片地址

在Vue3中，动态导入项目内部的图片通常通过`import()`函数配合`async`/`await`来实现，这样可以延迟加载图片资源，提高页面性能。下面是一个示例：

// 使用ES6语法动态导入图片
export default {
  data() {
    return {
      imageUrl: 'images/default.jpg', // 初始图片路径
    };
  },
  methods: {
    loadImageAsync(url) {
      const img = new Image();
      img.src = url;
      return new Promise((resolve, reject) => {
        img.onload = () => resolve(img);
        img.onerror = () => reject('Failed to load image');
      });
    },
  },
  mounted() {
    this.loadImageAsync(this.imageUrl)
      .then((img) => (this.$el.querySelector('img').src = img.src)) // 将图片添加到DOM元素
      .catch((error) => console.error(error));
  },
};

在这个例子中，当组件挂载时，会异步加载指定的图片。你可以通过改变`imageUrl`的数据值来动态切换图片。注意，由于浏览器的安全限制，如果图片地址不在同源策略允许的范围内，可能会导致跨域请求失败。