Material-UI 基於斷點更改 IMG

Question

我很熟悉使用斷點更改高度、寬度、字體大小等樣式，但我找不到根據屏幕大小更改圖像的示例。

具體來說，我想根據屏幕尺寸用新圖像替換圖像。 我的假設是我希望將圖像設置為它自己的組件來啟動......

import  React from "react";

export default function ResponsiveLogo() {

  return(
    <div>
      <img src="https://dummyimage.com/420x200/4169e1/fff.png&text=Logo+Placeholder" 
       alt="logo placeholder"/>
    </div>
  )

}

我相信我應該使用 useMediaQuery 來處理這個問題，但不確定語法。 因為我在尋找一個在一個斷點處執行此操作的示例之前沒有使用過 useMediaQuery，所以我知道如何繼續。

例如，假設我們想要為任何小於 Material-UI 的“sm”斷點 (600px) 的屏幕更改圖像，並且我們想要交換此圖像：“https://dummyimage.com/200x200/4169e1/fff。 png&text=徽標+占位符"

感謝您的指導！

Answer 1

我找到了一種使用 MUI 組件在 MUIv5 上執行此操作的簡單方法，但您必須為圖像元素使用 MUI Box 組件，以便您可以訪問 sx 道具。 （他們在官方文檔中使用 Box 作為圖像示例，所以我認為還是推薦使用）

這個想法是，不是使用“src”屬性設置圖像源，而是通過 sx 屬性中的“content”CSS 屬性設置它。 這樣在設置圖片url時就可以方便的訪問MUI主題斷點了：

import BigLogo from "../images/BigLogo.png";
import SmallLogo from "../images/SmallLogo.png";

<Box
    component="img"
    sx={{
        content: {
            xs: `url(${SmallLogo})`, //img src from xs up to md
            md: `url(${BigLogo})`,  //img src from md and up
        }
    }}
    alt="Logo"
/>

Answer 2

有幾種方法可以實現這一點。 例如，如果您的圖像是背景，您可以像使用 CSS 斷點更改任何其他 CSS 屬性一樣更改它。

但是，由於您在 HTML 中使用圖像元素，您可以在 javascript 中觀察窗口大小的變化或使用 HTML 解決方案。

選項#1 Javascript：

window.onresize = function(){
  if(window.width > 600){
    // do something like change img src path
  }
}

這種方法有很多缺陷。 如果它沒有正確實現，它會破壞性能，你需要弄清楚 JS 中正確元素的大小。

選項 #2 srcset 或圖片元素和 srcset

這是一種直接在 HTML 中構建響應式圖像的方法，允許圖像的多個文件路徑。 帶有srcset的圖像本身有點復雜（在鏈接中有更好的解釋），所以我更喜歡<picture>元素。

在你的 React 組件中，你會有這樣的東西：

<picture>
   <source media="(max-width: 400px)" srcset="mypic.jpg" >
   <source media="(max-width: 1200px)" srcset="myOtherPic.png">
   <img src="fallbackpic.gif" alt="alt text for pic">
</picture>

這很酷，因為您可以擁有任意數量的源代碼行，每個源代碼行都帶有媒體查詢樣式條件。 它們甚至可以是不同的文件類型，您可以像設置任何其他 HTML 元素屬性一樣動態設置它們中的每一個。

唯一的問題是<picture>是一個 HTML5 元素，因此您需要針對較新的瀏覽器才能使其工作。