@nuxt/image无法优化外部站点图片该如何排查解决

存在的错误 #

你的配置核心问题出在nuxt.config.js的image.domains字段填写不符合规范：

• domains配置项仅接受不带协议头的纯域名，你填写的https://upload.wikimedia.org多了https://协议前缀，导致模块无法识别白名单域名，也就不会对该域名下的图片做优化处理。
• 你的<nuxt-img>组件用法没有语法错误，无需调整。

修复操作 #

1. 修正配置文件 #

根据你使用的Nuxt版本调整对应配置：

Nuxt2 / Nuxt Bridge 版本

// nuxt.config.js
export default {
  image: {
    domains: ['upload.wikimedia.org']
  }
}

Nuxt3 + @nuxt/image v1.x 版本

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    domains: ['upload.wikimedia.org']
  }
})

2. 重启服务生效 #

修改配置后先删除项目根目录下的.nuxt缓存文件夹，再重启Nuxt开发服务即可，组件会自动对该域名下的图片执行webp格式转换、按需压缩等优化操作。

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