vue3+vite 项目动态渲染本地图片

想要把图中框住的图片动态渲染到页面上。
此处不可以使用require动态引入，会发现报错：require is not defind，因为 require 是属于 Webpack 的方法。

<template><div style="padding: 20px"><div class="img-item-box"><div class="img-item" v-for="(imgItem, imgIndex) in previewFileList" :key="imgIndex"><Image :src="imgItem" style="cursor: pointer" /></div></div></div>
</template>

<style lang="less" scoped>.img-item-box {display: flex;flex-wrap: wrap;flex-direction: row;.img-item {width: 150px;height: 150px;margin: 0 8px 8px 0;//margin-right: 10px;border-radius: 8px;overflow: hidden;:deep(.ant-image) {width: 100% !important;height: 100% !important;.ant-image-img {width: 100% !important;height: 100% !important;display: block !important;object-fit: cover !important;}}}}
</style>

第一种写法：在路径前加/src

<script setup>import { ref, computed, unref } from 'vue';import { Image } from 'ant-design-vue';const fileNameList = ref(['rotate-a.jpg', 'rotate-b.jpg', 'rotate-c.jpg', 'rotate-d.jpg']);const previewFileList = computed(() => {return unref(fileNameList).map((pItem) => {pItem = `/src/assets/rotate/${pItem}`;return pItem;});});
</script>

第二种写法：使用 new URL(url, import.meta.url)

<script setup>import { ref, computed, unref } from 'vue';import { Image } from 'ant-design-vue';const fileNameList = ref(['rotate-a.jpg', 'rotate-b.jpg', 'rotate-c.jpg', 'rotate-d.jpg']);const previewFileList = computed(() => {return unref(fileNameList).map((pItem) => {pItem = new URL(`../../../assets/rotate/${pItem}`, import.meta.url).href;return pItem;});});
</script>

vue3+vite 项目动态渲染本地图片相关推荐

vue如何动态渲染本地图片img
动态渲染本地图片 <div class="wrap_left" v-for="item of array" :key="item.id" ...
android 点动态显示图片,Android用RecyclerView实现动态添加本地图片
本文介绍了Android用RecyclerView实现动态添加本地图片,分享给大家,具体如下: 简单介绍一下用法: 1.跳转到图片选择页面: Intent intent = new Intent(Pa ...
【SCSS】vue3+vite项目引入SCSS及使用SCSS全局变量
vue3+vite项目引入SCSS及使用SCSS全局变量
[Android] 通过GridView仿微信动态添加本地图片
原文:http://blog.csdn.net/eastmount/article/details/41808179 前面文章讲述的都是"随手拍"中图像处理的操作,此篇文章主要讲述 ...
vue3 如何给动态渲染的组件添加ref
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一.问题示例二.尝试解决方案三.最终解决方案四.vue3官网解决方案前言提示:这里可以添加本文要记录的大概内 ...
用RecyclerView实现动态添加本地图片
本文所用的多图选择的library来自:https://github.com/lovetuzitong/MultiImageSelector 简单介绍一下用法: 1.跳转到图片选择页面: Intent ...
vue3+vite项目使用xlsx+xlsx-style+file-saver导出带有样式的excel表格方法
基于vue3+vite的项目实现导出带有样式的excel表格,框架用的是vben,所以表格用的是ant的table组件数据源,如果用原生表格需要用到备注的另外方法. 首先需要下载xlsx.xlsx-s ...
Vue3+Typescript+Vite 实现动态访问静态图片（含微信小程序端）
前言:在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,在菜单这一块我按照以往的写法,自己写了一个静态资源数据并用 require 包裹声明, 再以循环的方 ...
vue3+vite assets动态引入图片的几种方式，解决打包后图片路径错误不显示的问题
vite 官方默认的配置,如果资源文件在assets文件夹打包后会把图片名加上 hash值,但是直接通过 :src="imgSrc"方式引入并不会在打包的时候解析,导致开发环境可以 ...

vue3+vite 项目动态渲染本地图片

vue3+vite 项目动态渲染本地图片相关推荐

最新文章

热门文章