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

前言

Nuxt Image附带了一个预配置的unjs/ipx实例。一个基于lovell/sharp的开源自托管图像优化器。

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

正文

安装配置依赖

# 安装依赖
yarn add @nuxt/image

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

使用 NuxtImg

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

图片必须放到public 目录下，除public之外的其他目录不适用于

// vue 组件中使用
<div>
   <NuxtImg src="/img/test.png" :modifiers="{ grayscale: true, tint: '#00DC82' }" />
  <NuxtImg src="/img/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
如果这篇帖子帮到了，还请打赏哦！