如何使用 Create React App 在 React 中導入圖像（SVG 或 PNG）

Question

例如，我有這個<i>用於 Icon 元素

<i style={{ backgroundImage: `url(${'./images/names/Mike.svg'}` }}/>

我知道我可以根據這篇文章通過單獨導入圖像來導入圖像

但在我的情況下這是不可行的，因為我需要導入很多。

是否有解決方法可以在Create React App實現這一點？

編輯：我目前正在這樣做

backgroundImage: `url(${require(`./images/names/${name}.svg`)})`

但仍然無法正常工作，除非我對名稱進行硬編碼

backgroundImage: `url(${require(`assets/images/names/Mike.svg`)})`

這在我的情況下是不可行的。

Answer 1

以下是將圖像（SVG 和 PNG）導入 React 項目的三種方法。 您可以將任一文件類型與所有三個選項一起使用。

1. 導入圖像並在 src 屬性中使用它。
2. 導入圖像並在樣式屬性中使用它。
3. 動態插入到 require 函數中。

請參閱以下示例：

import React from 'react';
import backgroundImg from '../assets/images/background.png';
import logoImg from '../assets/images/logo.svg';

const Test = props => {

     const imageLink = 'another.png'
     // const imageLink = props.image
     // You can loop this component in it's parent for multiple images.

     return (
         <div>
              <img src={logoImg} style={{ width: '200px', height: '45px' }} />
              <div style={{ width: '100%', height: '100%', backgroundImage: `url(${backgroundImg})`, backgroundRepeat: 'no-repeat', backgroundPosition: 'center', backgroundSize: 'cover', position: 'fixed'}} />
              <img width={900} height={500} alt="test img"  src={require(`../assets/images/${imageLink}`)}/>
         </div>
     )
}

export default Test