如何在Typescript/React/Nextjs应用的Webpack配置中添加GIF加载器

Question

我在Typescript React应用程序中添加.gif文件后出现错误，如下所示。

./src/gif/moving.gif 1:6
Module parse failed: Unexpected token (1:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders

我在下载"file-loader">

后在我的webpack设置中添加了一些配置

{
test: /.scss$/,
use: ['style-loader', 'css-loader', 'sass-loader'],
}, 
// new setting for gif loader
{
test: /.(gif|svg|jpg|png)$/,
loader: "file-loader",
},

为什么我仍然得到配置错误?

Answer 1

有https://www.npmjs.com/package/next-images可以解决您的问题。否则你需要这样做:

import Image from 'next/image'
export default function Page() {
return (
<div>
<Image
src="/src/gif/moving.gif"
alt="Moving Image"
width={500}
height={500}
/>
</div>
)
}

注意:你可以做const movingGif = "/src/gif/moving.gif"，然后在图像组件src={movingGif}