vue3: img标签src属性动态设置资源路径

前言

vite中默认支持ESM 方式加载模块，没有require 相关方法。

补充两个方法。

方法 require()

• Node.JS 原生方法 ，以 CommonJS 方式加载模块/文件/图片；
• Webpack 默认支持 ，Vite 不支持；

方法 require.context()

• Webpack 特定方法，此方法可实现自定义上下文；
• Vite 不支持；

正文

vue中标签静态引入图片资源

<template>
  <!-- 静态引入图片资源 -->
  <img src="./assets/logo.png" alt="">
</template>

vue中标签动态引入图片资源的正确方法（通过require引入）：

<template>
  <!-- 动态引入图片资源-->
  <img :src="urls" >
</template>
 
<script setup>
// 动态引入图片资源的错误方法
// const urls = "./assets/logo.png";
// 动态引入图片资源的正确方法
const urls = require("./assets/logo.png");
 
</script>

动态引入图片资源

当需要动态引入时，第一反应是用模板字符和动态绑定，写法如下：

 <img src="./assets/${path}.png" alt="">

但运行后，控制台报错找不到图片。

官网说：“实际上，Vite 并不需要在开发阶段处理这些代码！在生产构建时，Vite 才会进行必要的转换保证 URL 在打包和资源哈希后仍指向正确的地址。”

解决方法

首先把给src绑定一个函数，然后把需要图片名字传给函数。

<img :src="" alt="getImageUrl(path)" />

错误的写法：

<script setup>
  function getImageUrl(path) {
    return new URL(path, import.meta.url).href;
  } 
</script>

这样动态导入的写法，在打包后会有问题，图片打包结果里没有。new URL() 的第一个参数有一部分得是固定的。

正确的写法：

<script setup>
  function getImageUrl(path) {
    return new URL(`./assets/${path}.png`, import.meta.url).href;
  } 
</script>

这里面有两个知识点：new URL 和 import.meta.url。

new URL()
创建一个新 URL 对象的语法：

new URL(url, [base])

• url —— 完整的 URL，或者仅路径（如果设置了 base），
• base —— 可选的 base URL：如果设置了此参数，且参数 url 只有路径，则会根据这个 base 生成 URL。

href属性，是函数的返回值。

import.meta
import.meta 对象包含关于当前模块的信息。

它的内容取决于其所在的环境。在浏览器环境中，它包含当前脚本的 URL，或者如果它是在 HTML 中的话，则包含当前页面的 URL。

由此，通过new URL(./assets/${path}.png, import.meta.url).href，可以得到完整连接。

参考文章

《Vite 基础知识》Vite 不支持 require 解决方案（三种情况/require is not defined）
Vue 3使用vite 2.0 动态引入加载图片 :src，解决方法超级简单