react+ts 使用webp格式的图片处理

aCknow2024-06-20 16:45

需求：

公司官网大图内存较大加载很慢，于是用webp格式的图片来替换原来的图片，在React项目中，如果你使用的是Create React App（CRA）或Webpack进行项目构建，遇到的常见错误原因可能涉及以下几点：

1.路径问题：使用require和相对路径需要确保路径正确且文件存在。

2.文件扩展名支持：确保项目配置正确支持特定格式的文件（如.webp）。

3.静态资源引用：有时使用require引入图片在现代React代码中通常会使用import语法。

我们逐一来看看可能的解决方法：
解决方法1：检查路径是否正确

确保我们的文件路径@/assets/images是正确的。例如，@符号通常是路径别名，需要确保webpack.config.js或者适用的配置文件有正确的别名设置。
解决方法2：使用import语法

通常我们会使用ES6的import语法来引入图片：

javascript 复制代码

import React from 'react';
import { animated } from 'some-animation-library';
import animateBg from './path-to-animateBg';
import bgImage from '@/assets/images/bg/bg_xx.webp'; // 使用实际可用的别名或相对路径

const MyComponent = () => {
  return (
    <animated.img
      src={bgImage}
      alt="背景"
      className="first-item__img"
      style={animateBg}
    />
  );
};

export default MyComponent;

解决方法3：配置WebPack支持.webp文件

使用了新的文件格式如.webp，一定要确保Webpack配置文件支持这种格式：

先查看package.json文件是否存在url-loader，如果没有就使用命令：

npm install --save url-loader

如果有的话就在webpack.config.js的配置添加

javascript 复制代码

 module: {
    rules: [
      {
          test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/, /\.webp$/],
          loader: require.resolve("url-loader"),
          options: {
             limit: imageInlineSizeLimit,
             name: "static/media/[name].[hash:8].[ext]"
             }
            },
      // 其他 loader规则 ...
    ],
  },