【Vue】vue3中动态导入资源

vue中动态导入资源

通过 new URL 动态导入资源

<script setup lang="ts">
import { computed, ref } from 'vue'
defineOptions({
  name: 'App',
})

/**
 * 获取图片路径
 * @param {String} value 图片名称
 * @returns {String} 图片路径
 * @description
 * 通过动态导入图片，获取图片路径
 * @example
 * getImgPath('1.jpg') // /src/assets/images/1.jpg
 * getImgPath('2.jpg') // /src/assets/images/2.jpg
 */
const getImgPath = (value: string): string => {
  /**
   * 1. 通过 new URL() 得到一个 URL 对象
   * 2. 传递两个参数
   *  - 第一个参数：文件所在的路径（相对路径 || 绝对路径）
   *  - 第二个参数：基地址（如果第一个参数是绝对路径则该参数会被忽略）
   * 3. 如果相对路径层级很深可以将该方法抽取至 utils 文件夹中
   * 4. 该方法可以用于获取任意文件的路径
   */
  const url = new URL(`./assets/images/${value}`, import.meta.url)
  console.log(url)
  return url.pathname
}


const name = ref('1.jpg')
// 点击按钮切换图片
const changeImg = () => {
  name.value = name.value === '1.jpg' ? '2.jpg' : '1.jpg'
}
</script>

<template>
  <div class="app">
    <h1>动态导入img</h1>

    <div class="btn">
      <button @click="changeImg">切换图片</button>
    </div>

    <img :src="getImgPath(name)" alt="" class="img" />
  </div>
</template>

<style scoped lang="scss">
.app {
  .img {
    margin-top: 20px;
    width: 800px;
  }
}
</style>

文件目录