vue3+vite 项目 img src字符串拼接动态src

白臻

已于 2024-05-04 08:39:00 修改

阅读量1.3k

点赞数 3

分类专栏： vue 文章标签： vue.js javascript 前端 elementui

于 2023-12-13 11:20:11 首次发布

本文链接：https://blog.csdn.net/weixin_44166849/article/details/134967550

版权

vue 专栏收录该内容

24 篇文章 0 订阅

订阅专栏

文章介绍了在Vue项目中，如何使用两种方法实现图片的动态加载：方法一是通过`getImg`函数根据卡内容动态获取图片路径；方法二是使用`getSvg`导出函数从SVG目录中动态获取SVG图片。这两者都涉及到前端开发中的组件模板和模块管理。

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

在这里插入图片描述
方法一、

<!-- 发起审批 -->
<template>
  <div>
    <div v-for="item in list" :key="item">
        <img
          :src="getImg(item.cardContent)"
          style="
            width: 36px;
            height: 36px;
            vertical-align: middle;
            margin-right: 10px;
          "
        />
    </div>
  </div>
</template>
<script setup>
const list = ref([
  {
    title: '人事审批',
    cardContent: '招聘申请',
  },
  { title: '财务审批', cardContent: '报销' },
  {
    title: '行政审批',
    cardContent: '物品领用',
  },
  {
    title: '其它模板',
    cardContent: '通用审批',
  },
])
const getImg = (cardContent) => {
  let img = new URL(`/src/assets/img/${cardContent}.png`, import.meta.url).href
  return img
}
</script>

方法二、

/**
 * img src动态的获取svg静态图片 (/src/assets/svgs/目录的所有svg图片)
 * name:文件名称
 * 使用方式: <img :src="getSvg(fileName)">
**/
export const getSvg = (name:string) => {
  const path = `/src/assets/svgs/${name}.svg` //拼接文件路径
  const modules = import.meta.globEager(`/src/assets/svgs/*.svg`) //获取该路径下的所有svg文件
  return modules[path]?.default //过滤出需要的sgv图片文件
}