Nuxt3动态导入assets图片不显示求助（原Nuxt2可正常运行）

关于文档表述的解释 #

「构建工具已配置处理对应文件扩展名」指的是：Nuxt3底层依赖的Vite（默认构建工具）需要明确识别.jpg/.png这类图片文件为静态资源，通过内置或自定义插件完成资源打包——包括复制到输出目录、生成可访问的URL、处理缓存哈希等操作。Nuxt2默认基于Webpack配置了这些处理逻辑，但Nuxt3的Vite构建规则有所不同，需要适配其静态资源处理方式。

问题原因 #

你当前的代码在Nuxt3中无法正常工作，是因为Vite对静态资源的动态导入处理逻辑和Webpack不同：直接使用await import('资源路径')的方式，Vite无法预扫描到该资源，导致打包后资源路径映射异常，即使URL解析看似正确，实际资源并未被正确输出或定位。

解决方案 #

方案1：使用new URL直接生成资源路径（适合固定路径） #

这种方式无需异步导入，直接通过Vite提供的import.meta.url生成正确的资源URL：

<template>
    <button @click="doImportImage()">Import image</button>
    <img v-if="contactAvatarUrl" :src="contactAvatarUrl" width="100px" height="100px">
</template>

<script setup lang="ts">
const contactAvatarUrl = ref('');

const doImportImage = () => {
    contactAvatarUrl.value = new URL('~/assets/img/contact/1.jpg', import.meta.url).href;
}
</script>

方案2：使用import.meta.glob预加载动态资源（适合动态路径） #

如果需要根据变量加载不同图片，用import.meta.glob预定义所有可能的资源路径，确保Vite能扫描并处理这些文件：

<template>
    <button @click="doImportImage('1')">Load Image 1</button>
    <button @click="doImportImage('2')">Load Image 2</button>
    <img v-if="contactAvatarUrl" :src="contactAvatarUrl" width="100px" height="100px">
</template>

<script setup lang="ts">
const contactAvatarUrl = ref('');

// 预扫描指定目录下所有jpg图片
const imageModules = import.meta.glob('~/assets/img/contact/*.jpg');

const doImportImage = async (imageId: string) => {
    const targetPath = `~/assets/img/contact/${imageId}.jpg`;
    const loadImage = imageModules[targetPath];
    if (loadImage) {
        const imageRes = await loadImage();
        contactAvatarUrl.value = imageRes.default;
    }
}
</script>

自定义静态资源配置（可选） #

Nuxt3默认已配置处理.jpg/.png等常见图片格式，但如果需要扩展或明确指定，可以在nuxt.config.ts中添加Vite配置：

export default defineNuxtConfig({
  vite: {
    // 明确指定需要处理的静态资源扩展名
    assetsInclude: ['**/*.jpg', '**/*.png', '**/*.jpeg']
  }
})

该配置会告诉Vite将这些扩展名的文件视为静态资源，确保打包时被正确处理。

验证步骤 #

1. 修改代码后，重启Nuxt开发服务器
2. 点击按钮加载图片，检查浏览器控制台的网络请求，确认图片资源返回200状态
3. 若仍有问题，检查dist目录（构建后）中是否存在对应的图片文件

内容的提问来源于stack exchange，提问作者Tim