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

最新推荐文章于 2024-03-30 12:59:19 发布

你在说啥-Lynn

最新推荐文章于 2024-03-30 12:59:19 发布

阅读量1.8k

点赞数

分类专栏： vue3 文章标签： vue javascript 前端

本文链接：https://blog.csdn.net/beauty_600/article/details/126302250

版权

vue3 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

本地图片

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