如何在React JS中为桌面端和移动端切换图片文件？

方法1：用原生<picture>标签（推荐，无需JS） #

这是最省心的方案，直接借助HTML原生能力，浏览器会自动根据屏幕尺寸选择对应图片，不用写复杂的React逻辑。

把你原来的<img>替换成以下代码即可：

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

function YourComponent() {
  return (
    <picture>
      {/* 屏幕宽度≥768px时加载桌面端图片（可根据需求修改断点） */}
      <source media="(min-width: 768px)" srcSet={HouseDesktop} />
      {/* 默认加载移动端图片，屏幕宽度小于768px时显示 */}
      <img src={HouseMobile} alt="house" />
    </picture>
  );
}

export default YourComponent;

• 你可以把768px改成项目实际需要的断点（比如1024px），匹配你的设计稿。
• 优势：无需监听窗口变化，浏览器自动处理，性能更优，代码量少。

方法2：用React状态监听窗口大小（适合需额外逻辑的场景） #

如果除了切换图片，你还要根据屏幕尺寸做其他操作，比如调整布局、显示/隐藏组件，可以用这种方式：

import React, { useState, useEffect } from "react";
import HouseMobile from "../images/mobile/house.jpg";
import HouseDesktop from "../images/desktop/house.jpg";

function YourComponent() {
  // 初始化状态：判断当前是否为桌面端
  const [isDesktop, setIsDesktop] = useState(window.innerWidth >= 768);

  useEffect(() => {
    // 监听窗口大小变化事件
    const handleResize = () => {
      setIsDesktop(window.innerWidth >= 768);
    };

    window.addEventListener("resize", handleResize);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return (
    <img src={isDesktop ? HouseDesktop : HouseMobile} alt="house" />
  );
}

export default YourComponent;

• 注意：必须导入useState和useEffect这两个React基础钩子才能用。

小提醒 #

• 优先选第一种方法，原生标签的实现方式更简洁高效，适合新手快速落地需求。
• 断点数值可以完全按照你的设计规范调整，没有固定标准。

内容的提问来源于stack exchange，提问作者queercoded