Nuxt+Quasar SSR中子组件动态图片无法显示的问题

1. 修复重复后缀报错 #

你遇到的Cannot find module '@/assets/imgs/sidebar/side_1.png.png'错误，是因为调用getUrl时传入的参数已带.png后缀，函数里又额外拼接了一次.png，导致路径重复。

解决方式二选一：

• 调用函数时传入不带后缀的文件名，比如getUrl('side_1')
• 修改函数去掉多余的后缀拼接：

function getUrl(img: string) {
  return require(`@/assets/imgs/sidebar/${img}`);
}

2. Nuxt SSR 动态require的正确写法 #

Nuxt基于Webpack构建，动态require必须保留固定路径前缀，让Webpack能提前扫描到静态资源目录，不能全动态拼接。

正确写法示例（确保传入的img是不带后缀的文件名）：

function getUrl(img: string) {
  // 固定目录前缀+动态文件名，Webpack可正常解析资源
  return require(`@/assets/imgs/sidebar/${img}.png`);
}

3. 解决构建后路径失效问题 #

你之前用/_nuxt/assets/imgs/sidebar/${img}的写法本地正常但构建后失效，原因是Nuxt生产构建时会给静态资源添加哈希值（比如side_1.abc123.png），硬编码路径无法匹配带哈希的文件名。

必须通过Webpack的require来获取构建后的正确路径，上面的require写法会自动处理哈希后缀，构建后也能正常加载。

4. TypeScript 类型处理 #

使用require时TypeScript可能提示类型错误，可添加类型声明：

// 声明图片资源模块
declare module '*.png' {
  const value: string;
  export default value;
}

function getUrl(img: string): string {
  // 部分场景下require返回模块对象，需取default获取路径
  return require(`@/assets/imgs/sidebar/${img}.png`).default;
}

5. 异步import的处理（若需使用） #

如果一定要用import()异步加载，需处理异步逻辑，在组件中结合async/await使用：

async function getUrl(img: string): Promise<string> {
  const module = await import(`@/assets/imgs/sidebar/${img}.png`);
  return module.default;
}

在组件中调用时，需在异步生命周期或setup中处理：

<script setup lang="ts">
const imgUrl = await getUrl('side_1');
</script>
<template>
  <img :src="imgUrl" alt="sidebar icon">
</template>

注意：异步加载方式在SSR中需要额外处理，优先推荐同步require写法，静态图片无需异步加载。

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