img标签 :src 动态绑定图片地址,但是加载图片不成功

Vue CLI

在使用 Vue CLI 构建的应用程序中,Vue CLI 默认使用 Webpack 作为构建工具,Webpack 支持 require 语法来引入静态资源(如图片)。【Vue】】img使用 :src 动态绑定图片地址,但是加载图片不成功_vue动态绑定src图片出不来-CSDN博客

Vite

然而,Vite 使用了不同的构建策略,并且默认情况下不支持 require 语法来导入静态资源。

1.使用 Vite 的 import() 语法来动态导入静态资源。

这需要在组件中异步加载每个图片,并将路径存储在一个响应式变量中。

javascript 复制代码
<template>
  <div>
    <u-image v-for="(item, index) in showSampleImage" :key="index" :src="item.src" :width="item.width" :height="item.height" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const showSampleImage = ref([
  {
    width: "311",
    height: "148",
    src: ""
  },
  {
    width: "311",
    height: "148",
    src: ""
  }
]);

onMounted(async () => {
  showSampleImage.value[0].src = (await import('../sampleImage/1.jpg')).default;
  showSampleImage.value[1].src = (await import('../sampleImage/2.jpg')).default;
});
</script>

2使用 import.meta.glob 批量导入

javascript 复制代码
<template>
  <div>
    <u-image v-for="(item, index) in showSampleImage" :key="index" :src="item.src" :width="item.width" :height="item.height" />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import images from '../sampleImage/*.jpg';

const showSampleImage = ref([
  {
    width: "311",
    height: "148",
    src: ""
  },
  {
    width: "311",
    height: "148",
    src: ""
  }
]);

onMounted(() => {
  Object.keys(images).forEach((path, index) => {
    images[path]().then(module => {
      showSampleImage.value[index].src = module.default;
    });
  });
});
</script>
相关推荐
liliangcsdn10 分钟前
mac mlx大模型框架的安装和使用
java·前端·人工智能·python·macos
CssHero13 分钟前
基于vue3完成领域模型架构建设
前端
PanZonghui16 分钟前
用项目说话:我的React博客构建成果与经验复盘
前端·react.js·typescript
挽淚19 分钟前
JavaScript 数组详解:从入门到精通
javascript
言兴20 分钟前
教你如何理解useContext加上useReducer
前端·javascript·面试
sunbyte23 分钟前
50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | GoodCheapFast(Good - Cheap - Fast三选二开关)
前端·javascript·css·vue.js·tailwindcss
前端的日常24 分钟前
网页视频录制新技巧,代码实现超简单!
前端
前端的日常26 分钟前
什么是 TypeScript 中的泛型?请给出一个使用泛型的示例。
前端
今禾27 分钟前
一行代码引发的血案:new Array(5) 到底发生了什么?
前端·javascript·算法
ccc101830 分钟前
老师问我localhost和127.0.0.1,有什么区别?
前端