vue3+vite 在v-for中对img的:src属性动态赋值，打包后图片不显示的问题

最新推荐文章于 2024-04-26 16:47:03 发布

Younger.fighting

最新推荐文章于 2024-04-26 16:47:03 发布

阅读量707

点赞数 14

文章标签： javascript 前端 vue.js vue

本文链接：https://blog.csdn.net/weixin_45825274/article/details/136513108

版权

先看一段代码：

<template>
  <div>
    <el-carousel height="350px">
      <el-carousel-item v-for="(item, index) in bannerImg" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
const bannerImg = [
   "../../assets/banner1.png",
   "../../assets/banner2.png",
   "../../assets/banner3.png",
   "../../assets/banner4.png",
];
</script>

问题：需要用到的图片为静态资源，并且存放在了src/assets/下，在动态引入时，打包后图片加载不出来。

解决方法：先使用import引入图片，然后再动态赋值给:src

<template>
  <div>
    <el-carousel height="350px">
      <el-carousel-item v-for="(item, index) in bannerImg" :key="index">
        <img :src="item" alt="" />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script setup lang="ts">
import banner1 from "../../assets/banner1.png";
import banner2 from "../../assets/banner2.png";
import banner3 from "../../assets/banner3.png";
import banner4 from "../../assets/banner4.png";
const bannerImg = [banner1, banner2, banner3, banner4];
</script>