動態更改Image->React組件-有解無憂

我有一個data傳遞給可重用組件的陣列。

const data = [
  {
    title: "A",
    source: "facebook",
  },
  {
    title: "B",
    source: "youtube",
  },
  {
    title: "C",
    source: "twitter",
  },
];

這是我的可重用組件的樣子：

import facebook from "../../images/facebook.png";
import youtube from "../../images/youtube.png";
import twitter from "../../images/twitter.png";

function NumberBox({ data }) {
  return (
    <>
      {data.map((item) => (
        <>
          <div className="title">{item.title}</div>
          <img src={item.source} className="image" />
        </>
      ))}
    </>
  );
}

我想根據來自道具的資料動態更改 img 元素...例如 Facebook 圖示、Twitter 圖示等。使用我在此處撰寫的代碼，我一直得到空白影像圖示，{item.source}但如果我{item.source}用{facebook}它替換它可以正常作業. 有人可以告訴我我在這里做錯了什么嗎？

謝謝。

uj5u.com熱心網友回復：

該字串"facebook"與影像不同facebook，它將被 webpack 決議為影像的完整 url。您可以通過兩種方式進行操作，一種是使用地圖：

image_map = {
    facebook: facebook,
    ...
}

<img src={image_map[data.source}]>

另一種方法是將 url 放在 data 中：

import facebook from '../images/facebook.png'

data = [
   title: 'facebook', 
   image: facebook // Notice: no quotes
]

uj5u.com熱心網友回復：

source: twitter 源必須是對變數的參考（您匯入了 img 源），而不是字串

const data = [
    {
       title: 'A'
       source: facebook // facebook but not 'facebook'
    },

    {
       title: 'B'
        source: youtube
    },

    {
      title: 'C'        
      source: twitter
    }
];

uj5u.com熱心網友回復：

在您的代碼中item.source是一個字串（如'facebook'），與匯入的影像無關import facebook from '../../images/facebook.png';

簡單而干凈的方法是data通過匯入在中設定影像：

import facebook from '../../images/facebook.png';

const data = [
    {
       title: 'A',
       source: 'facebook',
       image: facebook,

    },

...或使用公共網址：


const data = [
    {
       title: 'A',
       source: 'facebook',
       image: 'https://domain/public-url-to-image.jpg',

    },

然后：

<img src={data.image} />

uj5u.com熱心網友回復：

item.source是一個字串，而不是檔案的源路徑。要解決此問題，您可以檢查哪個item.source是并使用 import 陳述句中的源，如下所示：

function NumberBox({ data }) {
  return (
    <>
      {data.map((item) => (
        <>
          <div className="title">{item.title}</div>
          {item.source === 'facebook' && <img src={facebook} className="image" />}
          {item.source === 'twitter' && <img src={twitter} className="image" />}
          {item.source === 'youtube' && <img src={youtube} className="image" />}
        </>
      ))}
    </>
  );
}

uj5u.com熱心網友回復：

您參考的字串恰好是“facebook”、“youtube”或“twitter”，它不是影像檔案。如果您使用名稱為“twitter”的匯入影像，則它將顯示該影像。您必須更新資料陣列以參考影像變數。洗掉引號，它應該可以作業。示例如何使用鏈接。你的資料應該是

const data = [
  {
    title: "A",
    source: facebook,
  },
  {
    title: "B",
    source: youtube,
  },
  {
    title: "C",
    source: twitter,
  },
];

https://codepen.io/shnigi/pen/MWvpMeE

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337031.html

標籤：反应

上一篇：ReactJs添加第三方Javascript插件

下一篇：無法將資料從反應發送到快遞服務器