我想gatsby-image
有条件地渲染我的:我想为移动和桌面提供不同的图像。所以我需要把它们换掉。
现在我正在这样做:
<Desktop>
{heroImage && (
<MyGatsbyImage
img={heroImage}
/>
)}
</Desktop>
<Mobile>
{heroImageXS && (
<MyGatsbyImage
img={heroImageXS}
/>
)}
</Mobile>
其中<Desktop>
&<Mobile>
是具有display: block / display:none
取决于视口的媒体查询的样式组件。
但是:这是这里最有效的解决方案吗?我的解决方案是否总是在后台加载两个图像?
没有gatsby-image
,我会这样做:
<picture>
<source
media="(min-width: 650px)"
srcset="images/img1.png">
<source
media="(min-width: 465px)"
srcset="images/img2.png">
<img src="images/img-default.png"
alt="a cute kitten">
</picture>
...但这意味着不要gatsby-image
在这里使用-我确实想使用。