nuxt3: 使用 NuxtImg 不生效和请求报500的解决办法

前言

NuxtImg 默认使用了IPX作为图形修改器，IPX是Nuxt Image的内置和自托管图像优化器。但是我在使用时却报了500的错误，下面分享一下解决问题的过程

正文

安装配置依赖

# 安装依赖
yarn add @nuxt/image

// nuxt.config.ts
export default defineNuxtConfig({
  modules: [
    '@nuxt/image',
  ],
  image: {
        dir: 'assets/img' // 因为我的图片不是在public目录下，所以这里更改了一下
    },
})

使用 NuxtImg

我在 assets/img/ 目录下有两张图片

// vue 组件中使用
<div>
   <NuxtImg src="/test.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />
  <NuxtImg src="/abc.jpg" :modifiers="{ grayscale: true, tint: '#00DC82' }" />
</div>

报错500解决办法

node：V20 版本
nuxt3: V3.9 版本

只需要再增加一个依赖即可解决报错500的问题：

yarn add -D sharp

后记

图片配置参数参考：https://sharp.pixelplumbing.com/api-operation
如果这篇帖子帮到了，还请打赏哦！