v-for加载本地图片解决渲染本地静态图片问题

在element ui plus使用跑马灯组件,想用v-for渲染本地静态图片无法显示，主要问题是本地图片拿不到路径，无法显示。

首先找到的解决方案是用require引入图片路径,data中使用键值对的方式存储图片路径,使用v-for遍历

<template>
    <div class="swiper">
        <el-carousel :interval="4000" type="card" height="300px" pause-on-hover arrow="always">
            <el-carousel-item v-for="item in carouseData" :key="item">
                <img :src="item.url" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
data() {
    return {
      //定义跑马灯的图片路径
      carouseData: [
        { url: require("../assets/img/sw01.jpg") },
        { url: require("../assets/img/sw02.jpg") },
        { url: require("../assets/img/sw03.jpg") }
      ],
    };
  },
</script>

运行项目后，图片根本不显示，也拿不到图片路径。

后来得知，在我们用 vue2+ webpack 的时候，加载图片资源是使用require的，而在vue3+vite使用这种方式是不行的，vite 中没有 require 会报错。

那么就要找到vue3中获取本地图片路径的方法，再用v-for遍历图片数组。

首先，将资源引入为 URL

再定义一个方法使用new URL(url, import.meta.url)

//使用 getImgUrl 方法根据图片名获取图片路径
<img class="img" :src="getImgUrl(item.url)" alt="">
// 定义获取图片路径的方法，使用 new URL() 构造函数生成图片的绝对路径
const getImgUrl = (name) => {
    return new URL(`../../assets/image/${name}`, import.meta.url).href
}

这样就完美地拿到了本地图片路径啦，接着用v-for遍历就可以渲染出来了。

完整代码如下:

<template>
    <!-- 走马灯容器 -->
    <div class="swiper">
        <!-- Element UI 的走马灯组件，设置图片轮播 -->
        <el-carousel :interval="4000" type="card" height="300px" pause-on-hover arrow="always">
            <!-- 轮播项，遍历 carouseData 数组中的数据生成轮播图片 -->
            <el-carousel-item v-for="item in carouseData" :key="item">
                <!-- 轮播图片，使用 getImgUrl 方法根据图片名获取图片路径 -->
                <img class="img" :src="getImgUrl(item.url)" alt="">
            </el-carousel-item>
        </el-carousel>
    </div>
</template>

<script setup>
// 定义获取图片路径的方法，使用 new URL() 构造函数生成图片的绝对路径
const getImgUrl = (name) => {
    return new URL(`../../assets/image/${name}`, import.meta.url).href
}
// 走马灯需要轮播的数据，是一个包含图片名的数组
const carouseData = [
    { url: "sw01.jpg" },
    { url: "sw02.jpg" },
    { url: "sw03.jpg" },
]
</script>

详细解释一下：

上述代码中的 v-for 指令遍历了一个名为 carouseData 的数组，数组中每个元素都是一个包含一个 url属性的对象，该属性对应着图片的文件名（例如 sw01.jpg）。在每次循环迭代中，v-for 指令会将数组中的元素与对应的模板进行渲染，并将 url属性的值传递给 getImgUrl 函数作为参数，以生成图片的完整路径。因此，通过 v-for 指令迭代 carouseData数组并结合 getImgUrl 函数的处理，最终生成了一个轮播图的组件，显示了数组中包含的三张图片。

在官方文档中也提到了这种解决方法噢。

v-for加载本地图片 解决渲染本地静态图片问题

v-for加载本地图片解决渲染本地静态图片问题