Vite获取本地图片链接功能组件

最新推荐文章于 2025-03-30 18:01:48 发布

培根儿

最新推荐文章于 2025-03-30 18:01:48 发布

阅读量500

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/m0_57855994/article/details/131778941

版权

文章展示了在Vue项目中如何使用工具类组件index.js中的getAssetURL函数来处理相对路径，将它们转化为可引用的图片URL。在city.vue组件中，这个函数被用于设置TabBarData的activeImg和inactiveImg属性，为不同的Tab按钮状态提供图片。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//工具类组件 index.js

export const getAssetURL=(image)=>{
    // 参数:相对路径,当前文件路径URL
    return new URL(`../assets/imgs/${image}`,import.meta.url).href
}

//使用业务文件  city.vue

<script>
import { ref, reactive } from "vue";
import {getAssetURL} from '@/utils/index.js'

export default {
  setup() {
    const active = ref(0);
    const TabBarData = reactive([
      {
        text: "首页",
        to: "home",
        activeImg: getAssetURL("tabbar/tab_home_active.png"),
        inactiveImg: getAssetURL("tabbar/tab_home.png"),
        currentIndex: 0,
      },
      {
        text: "收藏",
        to: "favor",
        activeImg: getAssetURL("tabbar/tab_favor_active.png"),
        inactiveImg: getAssetURL("tabbar/tab_favor.png"),
        currentIndex: 1,
      },
      {
        text: "订单",
        to: "order",
        activeImg: getAssetURL("tabbar/tab_order_active.png"),
        inactiveImg: getAssetURL("tabbar/tab_order.png"),
        currentIndex: 2,
      },
      {
        text: "消息",
        to: "message",
        activeImg: getAssetURL("tabbar/tab_message_active.png"),
        inactiveImg: getAssetURL("tabbar/tab_message.png"),
        currentIndex: 3,
      },
    ]);

   

    return { active, TabBarData };
  },
};
</script>