vue封装动态显示图片，v-for显示

这个方法是动态显示本地图片，服务器获取的图片不需要该方法

vue中图片数据，路径中公共部分不需要写，下面是vue3存储，vue2放data中

<script setup>
const tabBarData = [
  {
    name: "首页",
    default: "tab_home.png",
    active: "tab_home_active.png",
    path: "/home",
  },
  {
    name: "收藏",
    default: "tab_favor.png",
    active: "tab_favor_active.png",
    path: "/favor",
  },
  {
    name: "订单",
    default: "tab_order.png",
    active: "tab_order_active.png",
    path: "/order",
  },
  {
    name: "消息",
    default: "tab_message.png",
    active: "tab_message.png",
    path: "/message",
  },
];
</script>

vue2

<template v-for="(item, index) in tabBarData" :key="index">
  <div class="tabBar-item">
    //在vue2中通过require方法引入，必须要有公共部分和私有部分拼接，否则无效
    <img :src="require('@/assets/img/tabbar/'+item.default)" alt="" />
    <span>{{ item.name }}</span>
  </div>
</template>

vue3

在utils文件夹下创建load_assets.js文件

export const getAssetURL = (image) => {
  // 参数一：相对路径
  // 参数二：当前路径的URL
  return new URL(`../assets/img/tabbar/${image}`, import.meta.url).href;
};

vue中引入使用

<script setup>
import { getAssetURL } from "@/utils/load_assets.js";
</script>
//html，这个template不是根节点，专门用来遍历的
<template v-for="(item, index) in tabBarData" :key="index">
  <div class="tabBar-item">
    <img :src="getAssetURL(item.default)" alt="" />
    <span>{{ item.name }}</span>
  </div>
</template>