Веб-изображения не отображаются правильно - PullRequest
Новая
       15

Веб-изображения не отображаются правильно

0 голосов
/ 27 марта 2019

У меня проблема с сборкой webp изображений.Есть проект реагирования ССР.Пример кода реакции: 

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>
    ...
    )
  );
};

Пример файла конфигурации веб-пакета: 

{
    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 'to' test '(test: /.(jpe?g|gif|svg|ico|png|webp)$/,) я получу следующую проблему webpack конвертирует webp в png, который не может быть открыт.

1 Ответ

0 голосов
/ 27 марта 2019

Вот так я отформатировал свой 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

Я сделал мой веб-пакет немного по-другому. webp-загрузчик работал хорошо для меня, за исключением того факта, что он не передавал png в выходной каталог.

С webp-загрузчиком: 

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

Веб-загрузчик преобразует изображения в формат веб-страниц.Затем поместите изображения в каталог output / img (я не указывал расположение вывода выше, поскольку у меня сейчас нет кода на моем лице)

Затем, чтобы получить pngs в выходной каталог, я использовалплагин веб-пакета CopyWebpackPlugin .Это берет каталог и помещает его в выходной каталог. 

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

После того, как я сделал эту реализацию, я решил сделать обратное.Мне не понравился веб-загрузчик.Я закончил преобразование своих изображений через CLI с помощью инструмента webp и использовал CopyWebpackPlugin для перемещения файлов webp в выходной каталог.Затем мне пришлось обработать мои изображения через веб-пакет, используя загрузчик файлов 

{
    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" }
    ]),
    ...
],

Надеюсь, это немного поможет!

...