Vue 图片打包之后访问路径错误问题的解决 vite中动态加载图片路径

如果图片资源不是来自于服务器，而是本地资源，那么就会遇到动态加载图片的问题。

在vue项目中，v-for显示的图片，导出时发现图片路径不对

在vue项目中，构建工具使用webpack，想要动态加载图片路径，只要用require()即可，但是如果工具是基于vite的话，vite是直接根据ES Modules的，它是没有require的，那怎么办呢？

<template v-for="(item, index) in tabbarData" :key="index">
      <div class="tab-bar-item">
      <img :src="require(item.image)">
      <div class="text">{{ item.text }}</div>
    </div>
</template>

这个时候需要用到new URL()，它会返回一个url对象，这个对象中有href属性，包含完整的URL。

          <div class="price-feature-item" v-for="(v,i) in priceFeatureList" :key="i" >
            <div class="price-feature-item-content">
              <div class="price-feature-item-img">
                <img :src="getAssetsImg(`${v.img}`)" />
              </div>
              <div>{{v.desc}}</div>
            </div>
          </div>

具体的URL详情可以查阅mdn文档，这里只解释一下怎么解决动态图片问题。

URL - Web API 接口参考 | MDN

New URL（）：这里是传两个参数，参数一是相对路径（相对于当前文件），也就是我们要动态加载的图片的路径；参数二传的是当前文件的地址，使用import.meta.url获取。

简单来说就是根据第二个参数的当前文件路径来找到第一个参数的相对文件路径。

为了方便使用，封装到工具函数中，记得注意一下相对路径的改变：

export const getAssetsImg = (image) => {
  return new URL(`../assets/img/${image}`,import.meta.url).href
}

在外部引入即可

import { getAssetsImg } from '../../utils/load_assets';