Nuxt 2中Nuxt Image模块无法渲染组件传入的动态图片

问题场景 #

在Nuxt 2项目中使用Nuxt Image模块时，出现以下异常：

• 组件中通过props传入的动态图片，用<nuxt-img>标签无法渲染
• 替换为原生<img>标签后，同一动态图片可正常显示
• 页面级使用静态路径的<nuxt-img>标签功能完全正常

不生效的代码 #

<nuxt-img
  :class="
    imageIsLeft
      ? 'md:-translate-x-5 xl:-translate-x-0'
      : 'md:translate-x-5 xl:translate-x-0'
  "
  class="image-full md:max-w-[500px] md:w-full"
  :src="require(`@/static/img/main/${image}.jpg`)"
  height="569"
  width="500"
  loading="lazy"
  alt="headshot"
/>

生效的代码示例 #

原生<img>标签版本

<img
  :class="
    imageIsLeft
      ? 'md:-translate-x-5 xl:-translate-x-0'
      : 'md:translate-x-5 xl:translate-x-0'
  "
  class="image-full md:max-w-[500px] md:w-full"
  :src="require(`@/static/img/main/${image}.jpg`)"
  height="569"
  width="500"
  loading="lazy"
  alt="headshot"
/>

页面级静态路径<nuxt-img>版本

<nuxt-img
  quality="60"
  alt="envelope"
  width="39"
  height="33"
  class="w-[25px] xs:w-[39px]"
  src="/img/icons/envelope.svg"
/>

问题根源 #

Nuxt Image模块需要提前解析图片路径，以此完成图片优化（如生成多尺寸适配图、格式转换等）。而动态require返回的是编译后的URL字符串，模块无法识别该字符串对应的原始静态资源，因此无法完成后续优化流程，最终导致图片不渲染。

解决方法 #

方法1：直接传入静态相对路径字符串 #

无需使用require，直接拼接动态路径即可。Nuxt Image会自动识别static目录下的资源，路径以/开头对应static根目录：

<nuxt-img
  :class="imageIsLeft ? 'md:-translate-x-5 xl:-translate-x-0' : 'md:translate-x-5 xl:translate-x-0'"
  class="image-full md:max-w-[500px] md:w-full"
  :src="`/img/main/${image}.jpg`"
  height="569"
  width="500"
  loading="lazy"
  alt="headshot"
/>

方法2：提前导入所有可能的图片（适合图片数量有限的场景） #

在组件中预先导入所有可能用到的图片，通过props值匹配对应的图片资源：

<script>
// 导入所有可能的图片资源
import imgAlice from '@/static/img/main/alice.jpg'
import imgBob from '@/static/img/main/bob.jpg'

export default {
  props: ['image'],
  computed: {
    imageSrc() {
      // 建立props值与图片资源的映射关系
      const imageMap = {
        alice: imgAlice,
        bob: imgBob
      }
      return imageMap[this.image]
    }
  }
}
</script>

<template>
  <nuxt-img
    :class="imageIsLeft ? 'md:-translate-x-5 xl:-translate-x-0' : 'md:translate-x-5 xl:translate-x-0'"
    class="image-full md:max-w-[500px] md:w-full"
    :src="imageSrc"
    height="569"
    width="500"
    loading="lazy"
    alt="headshot"
  />
</template>

方法3：确认Nuxt Image的静态资源配置 #

检查nuxt.config.js中的Nuxt Image配置，确保static选项正确指向项目的静态资源目录：

export default {
  modules: ['@nuxt/image'],
  image: {
    static: {
      dir: 'static', // 默认值，需与项目静态目录一致
      baseURL: '/'
    }
  }
}

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