<nuxt-img/>绑定API返回的v-bind:src无法显示图片问题

先修正最可能的配置错误 #

你在nuxt.config.js的image.domains中填写了带https://的域名，这是错误的——该配置只需要填写纯域名主体，不能包含协议前缀。正确配置如下：

// nuxt.config.js
export default {
  image: {
    domains: ['raw.githubusercontent.com']
  }
}

之前的错误配置会导致IPX服务无法正确解析域名，直接触发500错误，这就是你看到终端和控制台报错的核心原因。

验证动态src的正确性 #

确保从PokeAPI获取的图片地址完整且可访问，可以在代码中打印src值排查是否存在异步加载延迟或地址拼接错误：

<template>
  <nuxt-img :src="pokemonImg" alt="Pokemon" />
</template>
<script>
export default {
  data() {
    return { pokemonImg: '' }
  },
  async mounted() {
    const res = await fetch('https://pokeapi.co/api/v2/pokemon/1')
    const data = await res.json()
    this.pokemonImg = data.sprites.front_default
    console.log(this.pokemonImg) // 确认地址是否有效
  }
}
</script>

其他排查方向 #

• 若修正域名后仍报错，尝试重启Nuxt开发服务器，IPX服务偶尔会出现启动异常的情况。
• 核对你的Nuxt版本，不同版本的Nuxt Image配置逻辑略有差异，比如Nuxt 3需要先在modules中注册@nuxt/image模块。

结论 #

<nuxt-img>完全支持动态绑定外部API返回的图片地址，你的问题根源在于域名配置格式错误。修正配置并验证动态src的有效性后，图片即可正常显示，不会仅展示懒加载占位图。

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