如何将 React-webp 中的图像类型转换为 png 或 jpg？

Question

简短的 sn-p 代码会很有帮助。我已经尝试过使用 Node，但我在 django 上有后端，所以如果浏览器是 Safari，我只需要将 .webp 图像转换为其他格式，如果可能的话，我需要使用 React 来完成。

Answer 1

要使用 ReactJS 检测浏览器，请查看下面的链接Browser Detection in ReactJS

使用 reactjs 转换图像格式我认为这不是最好的方法，但它可以帮助你 安装包 react-image-webp

npm install react-image-webp 

然后使用

import react from 'react'
import Image from 'react-image-webp';

const imageLoader = ()=>{
return (<Image
     src={require('./path/to/image.(png or jpg)')}
     webp={require('./path/to/webp')}
 />)
}

或

import react from 'react'
import {isWebpSupported} from 'react-image-webp/dist/utils';

 const imageLoader = ()=>{
    return ({isWebpSupported() ? <img src={require('./path/to/img.webp')} /> : <img src={require('./path/to/img.png')} /> }
)
    }