如何在react js中更改桌面和移动视图的img文件

Question

我有两个不同的img文件，一个用于桌面，另一个用于移动视图，但我不知道如何将它们都放在我的react代码中，有人能帮忙吗？

正如你所知，我是新手，这就是我目前所知道的。。。

import React from "react";
import House from "../images/mobile/house.jpg";
import HouseDesktop from "../images/desktop/house.jpg";

<img src={House} alt="house" />

Answer 1

您不需要做出反应。只需使用纯HTML

<picture>
<source media="(min-width:600px)" srcset={desktopimg}
<img src={mobileimg} >
</picture>

详细信息

代码不起作用的原因。您可以将单个字符串分配给SRC。用法不正确。

桌面移动img识别方法：1(给出两个不同的img，并用CSS隐藏一个。所以CSS完成了所有的工作。

2. 新的实用解决方案是只使用HTML图片标记

最好不要尽可能多地使用java脚本，然后使用CSS。

Answer 2

您可以获得当前设备的宽度，并基于该屏幕宽度

您可以更改img源。

<img src={window.innerWidth > 1024 ? HouseDesktop : HouseMobile} alt="house" />

Answer 3

我建议您使用这个库：反应设备检测(https://www.npmjs.com/package/react-device-detect)。

然后调用isMobile方法检查设备，然后渲染图像：

import {isMobile} from 'react-device-detect';
//If isMobile will render House otherwise HouseDesktop
<img src={isMobile? House: HouseDesktop} alt="house" />

Answer 4

在我的案例中，我尝试了这种方法，它有效：

import HeroMobile from "./images/hero-mobile.jpg";
import HeroDesktop from "./images/hero-desktop.jpg";
<picture>
<source media='(max-width: 768px)' srcSet={HeroMobile} />
<source media='(min-width: 768px)' srcSet={HeroDesktop} />
<img src={HeroDesktop} alt='hero' />
</picture>