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
如果这篇帖子帮到了,还请打赏哦!
博客中所涉及到的图片都有版权,请谨慎使用