如何使用 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

下载“文件加载器”后，我在 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"然后在Image组件里src={movingGif}