Webp 图像无法正确呈现答案

【问题标题】：Webp images doesn't render correctWebp 图像无法正确呈现
【发布时间】：2019-08-18 09:08:14
【问题描述】：

我在使用 webpack 构建 webp 图像时遇到问题。有 SSR 反应项目。反应代码示例：

import slotroulette from './slotroulette.png';
import slotrouletteWebp from './slotroulette.webp';

...

  return (
    ...
        <picture>
          <source srcSet={slotrouletteWebp} type="image/webp" />
          <img
            css={{ width: '200px' }}
            src={slotroulette}
            alt="slot-roulette"
          />
        </picture>
    ...
    )
  );
};

示例 webpack 配置文件：

{
    test: /\.(jpe?g|gif|svg|ico|png)$/,
    use: [
      {
        loader: 'file-loader',
        options: {
          hash: 'sha512',
          digest: 'hex',
          publicPath: `${CDN_HOST}/pub/`,
          outputPath: 'pub/',
          name: '[hash].[ext]',
        },
      },
      {
        loader: 'image-webpack-loader',
        query: {
          mozjpeg: {
            progressive: true,
          },
          gifsicle: {
            interlaced: false,
          },
          svgo: {
            plugins: [
              {
                removeViewBox: false,
              },
            ],
          },
          webp: {
            quality: 80,
          },
        },
      },
    ],
  },

在这种情况下，我有下一个错误：

ERROR in .../slotroulette.webp
Module parse failed: Unexpected character '' (1:6)
You may need an appropriate loader to handle this file type.

如果我将 'webp' 添加到 'test'( test: /.(jpe?g|gif|svg|ico|png|webp)$/,) 我将得到下一个问题 webpack convert webp to png that打不开。

【问题讨论】：

图片元素中的img元素没有srcSet属性，只有src属性。另外，请确保您的服务器支持提供图片/webp meme 类型
lol meme type @Christian4423 - 它是一种新的内容类型吗？
@DerekPollard 我相信是的。我不得不将它添加到我的 IIS 配置中，因为它没有被列为默认类型

标签： javascript reactjs webpack webp

【解决方案1】：

这就是我格式化 jsx 的方式。

JSX

<picture>
    <source srcSet={`${baseUrl.public}img/rsgis-logo.webp`} type="image/webp" />
    <source srcSet={`${baseUrl.public}img/rsgis-logo.png`} type="image/png" />
    <img src={`${baseUrl.public}img/rsgis-logo.png`} className="rsgis-logo" alt="RS&amp;GIS Logo" />
</picture>

Webpack

我的 webpack 有点不同。 webp-loader 对我来说效果很好，只是它没有将 png 传输到输出目录。

使用 webp-loader：

loaders: [
  {
    test: /\.(jpe?g|png)$/i,
    loaders: [
      'file-loader',
      'webp-loader?{quality: 80}'
    ]
  }
]

webp-loader 会将图像转换为 webp 格式。然后把图片放到 output/img 目录下（上面我没有指定输出位置，因为我现在没有代码）

然后为了将 pngs 放到输出目录，我使用了 webpack 插件CopyWebpackPlugin。这需要一个目录并将其放在输出目录中。

plugins: [
    ...,
    new CopyWebpackPlugin([
        { from: "./src/images/png", to: "./img" }
    ]),
    ...
],

在我完成这个实现之后，我决定做相反的事情。我不喜欢网络加载器。我最终通过 CLI 使用 webp tool 转换了我的图像，并使用 CopyWebpackPlugin 将 webp 文件移动到输出目录。然后我让 webpack 使用文件加载器正常处理我的图像

{
    test: /\.(svg|gif|jpe?g|png)$/i,
    use: [{
        loader: "file-loader",
        options: {
            name: "/img/[name].[ext]"
        }
    }]
},

plugins: [
    ...,
    new CopyWebpackPlugin([
        { from: "./src/images/webp", to: "./img" }
    ]),
    ...
],

希望这会有所帮助！

【讨论】：