vue3 v-for动态循环本地图片，不能使用require

最新推荐文章于 2024-09-29 17:13:55 发布

宁采不是臣

最新推荐文章于 2024-09-29 17:13:55 发布

阅读量1k

点赞数 2

文章标签： javascript 前端 webpack

本文链接：https://blog.csdn.net/weixin_57925162/article/details/130483828

版权

文章介绍了在Vite构建的项目中，由于`require`不适用，如何利用`newURL`结合`import.meta.url`来动态渲染本地图片。示例代码展示了在Vue组件中，通过计算属性`imgUrl`处理文件名列表，生成包含图片路径和文本信息的数组，用于v-for循环显示图片和文本。

摘要由CSDN通过智能技术生成

require 是属于 Webpack 的方法,在v3+vite的项目里面并不适用，详情请看vite文档

这里使用vite官网文档的new URL(url, import.meta.url)方法来实现渲染动态渲染本地图片

<div class="imgbox flex alitem" v-for="item in imgUrl">
                            <img :src="item[1]" alt="">
                            <p>{{ item[0] }}</p>
                        </div>

const fileNameList = ref([{ text: '大坝其他图片', image: 'u1339.png' }, { text: '大坝其他图片', image: 'u1336.jpg' }, { text: '大坝其他图片', image: 'u1337.jpg' }, { text: '大坝其他图片', image: 'u1338.jpg' }]);
const imgUrl = computed(() => {
    return unref(fileNameList).map((pItem: any) => {
        const image = new URL(`../../assets/image/${pItem.image}`, import.meta.url).href;
        const text = pItem.text
        const lsit = []
        lsit.push(text, image)
        return lsit;
    })
})