反应没有srcset的响应图像?

时间:2019-05-30 04:38:13

标签: html reactjs

我想确认React是否能够在不需要html中的srcset标签的情况下提供响应图像。

使用窗口宽度的状态,我可以设置图像的条件渲染。使用chrome并检查网络流量,似乎可以提供所需的图像,而不必提供所有图像。

import React from "react"
import images from "../assets/images"


class App extends React.Component{
    state = {
        width: 0
    }
    componentDidMount(){
        window.addEventListener("resize", this.handleResize)
        this.setState({
            width: window.innerWidth
        })
        console.log(this.state.width)
    }
    handleResize = () =>{
        this.setState({
            width: window.innerWidth
        })
        console.log(this.state.width)
    }
    render(){
        const image = this.state.width > 1000 && this.state.width !== 0 ? images.HD : images.LD
        return(
            <div>
                <img src={image} alt="hd/ld"/>
            </div>
        )
    }
}

export default App

这是提供具有不同分辨率的特定图像的有效方法吗?

0 个答案:

没有答案