想要把图中框住的图片动态渲染到页面上。
此处不可以使用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>