如何根據屏幕尺寸渲染不同的圖像

Question

我想根據瀏覽器屏幕寬度呈現不同的 svg。 我找到了一個解決方案，希望我在 img 標簽中使用srcSet 。 但是，我無法讓它工作。

目標應該是在移動設備上呈現SmallTalents ，在平板電腦上呈現BigTalents +

快速筆記：

• 我正在使用 TailwindCSS。
• svgs 完全不同，不僅僅是縮小版。

例子

import React from "react";
import SmallTalents from "../../../assets/smallTalents.svg";
import BigTalents from "../../../assets/bigTalents.svg";

function Example() {
  return (
    <section>
      <img
        srcSet={`${SmallTalents}, 200w ${BigTalents} 600w`}
        sizes="(max-width: 600px) 480px, 800px"
        src={SmallTalents}
        alt="talents"
      />
    </section>
  );
}

export default Example;

更新：

試過這個，不工作

<picture>
  <source media="(min-width: 300px)" srcset={SmallTalents} />
  <source media="(min-width: 900px)" srcset={BigTalents} />
</picture>

解決方案（不理想）

<img src={SmallTalents} alt="talents" className="my-5 md:hidden" />
<img src={BigTalents} alt="talents" className="my-5 hidden md:flex" />

Answer 1

您可以使用 html 中的 picture 元素根據屏幕尺寸渲染不同的圖像：

<picture>
  <source media="(min-width: 650px)" srcset="img_food.jpg">
  <source media="(min-width: 465px)" srcset="img_car.jpg">
  <img src="img_girl.jpg">
</picture>

Answer 2

我認為您的 srcSet 屬性中有一個小錯字，200w 應該在逗號的左側。 即srcSet={ ${SmallTalents} 200w, ${BigTalents} 600w }