第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

在沒有路徑的情況下將圖像添加到 Material-UI 卡

在沒有路徑的情況下將圖像添加到 Material-UI 卡

至尊寶的傳說 2023-03-24 16:11:56
我想將圖像添加到 CardMedia 組件,但我目前將其作為 base64 字符串,如下所示:iVBORw0KGgoAAAAANSUhEUgAAASwAAACoCAMAAABg99fBOxrQANHibkS1KoplYAFHgUGz85g6Ggnn2ysaMXSlccHislKRm7uI10eB9piJYuPjE3epRveUuwrTNidn9ad2ZMZFxNfoOJjTsOGESjp...所以我嘗試將字符串轉(zhuǎn)換為 blob/文件,但之后如何將圖像附加到 CardMedia?它似乎在期待圖像的路徑
查看完整描述

1 回答

?
明月笑刀無情

TA貢獻(xiàn)1828條經(jīng)驗(yàn) 獲得超4個(gè)贊

指定內(nèi)容以 base64 編碼。我在示例中使用了 svg,只需根據(jù)需要更新您的 MIME 類型,例如,image/png


const { Card, CardMedia } = MaterialUI;

    

ReactDOM.render(

  <Card>

    <CardMedia

      style={{ height: 100, width: 100 }}

      image="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+"

    />

    <CardMedia

      component={() => (

        <img

          alt="test"

          src="data:image/svg+xml;base64,PHN2ZyBjbGFzcz0iTXVpU3ZnSWNvbi1yb290IiBmb2N1c2FibGU9ImZhbHNlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCIgYXJpYS1oaWRkZW49InRydWUiID48cGF0aCBkPSJNMTUgM2wyLjMgMi4zLTIuODkgMi44NyAxLjQyIDEuNDJMMTguNyA2LjcgMjEgOVYzaC02ek0zIDlsMi4zLTIuMyAyLjg3IDIuODkgMS40Mi0xLjQyTDYuNyA1LjMgOSAzSDN2NnptNiAxMmwtMi4zLTIuMyAyLjg5LTIuODctMS40Mi0xLjQyTDUuMyAxNy4zIDMgMTV2Nmg2em0xMi02bC0yLjMgMi4zLTIuODctMi44OS0xLjQyIDEuNDIgMi44OSAyLjg3TDE1IDIxaDZ2LTZ6Ij48L3BhdGg+PC9zdmc+"

        />

      )}

    />

  </Card>, 

  document.getElementById("root") 

);

<body>

  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>

  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

  <script src="https://unpkg.com/@material-ui/core@latest/umd/material-ui.development.js"></script>


  <div id="root"></div>

</body>


查看完整回答
反對(duì) 回復(fù) 2023-03-24
  • 1 回答
  • 0 關(guān)注
  • 154 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)