vue3+vite 关于图片渲染问题

1.文件配置

• vue3
• swiper:11.1.4
• vite5.2.0

2.出现问题

  我是用import去导入的图片 

这样就需要考虑到一个问题，就是回显的时候，数据需要处理，没处理前返回来的是

src="[object Promise]

如果你没有用swiper,我认为可以直接在方法里写：例如

methods: {
    async getImageSrc(promise) {
      try {
        const image = await promise;
        return image.default; 
      } catch (error) {
        console.error('Error loading image', error);
        return ''; 
      }
    },
  },

但是我使用了swiper，你就会发现，swiper会比promise先加载，这个时候你就只能在setup()去处理数据了。

渲染数据

处理数据

 setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
    const uploadedImageUrls = [
      import('@/views/Plants/img/product/1.png'),
      import('@/views/Plants/img/product/2.png'),
    ];
    // 使用ref来存储预加载后的图片实际src
    const preloadedImageSrcs = ref([]);
    // 异步处理图片Promise，获取实际src
    async function preloadImageSrcs() {
      try {
        const resolvedImages = await Promise.all(uploadedImageUrls);
        preloadedImageSrcs.value = resolvedImages.map(img => img.default); // 假设每个模块默认导出图片URL
        console.log(preloadedImageSrcs.value);
      } catch (error) {
        console.error('Error preloading images:', error);
      }
    }
    // 组件挂载时开始预加载图片
    onMounted(() => {
      preloadImageSrcs();
    });
    return {
      thumbsSwiper,
      setThumbsSwiper,
      preloadedImageSrcs,
      modules: [FreeMode, Navigation, Thumbs],
    };
  },

这样就可以了，完结，撒花花！如果有用的话可以给我点点赞噢！