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

需求:

公司官网大图内存较大加载很慢,于是用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规则 ...
    ],
  },
相关推荐
专注API从业者3 小时前
Python + 淘宝 API 开发:自动化采集商品数据的完整流程
大数据·运维·前端·数据挖掘·自动化
烛阴4 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20185 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
Nicholas685 小时前
flutterAppBar之SystemUiOverlayStyle源码解析(一)
前端
黑客飓风5 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
emojiwoo6 小时前
【前端基础知识系列六】React 项目基本框架及常见文件夹作用总结(图文版)
前端·react.js·前端框架
张人玉7 小时前
XML 序列化与操作详解笔记
xml·前端·笔记
杨荧7 小时前
基于Python的宠物服务管理系统 Python+Django+Vue.js
大数据·前端·vue.js·爬虫·python·信息可视化
YeeWang8 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip8 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构