React - 无法显示路径存储在 json 文件中的 svg 图像

Question

我有一个 json 文件，用于存储我的 svg 图标的路径和我想要显示的其他信息。在一个组件中，我映射存储在该文件中的数据。它显示了我存储在那里的所有数据，除了图像。当我转到以下目录（图标文件夹位于公用文件夹中）http://localhost:3000/icons/france.svg 时，我可以看到图像，因此这意味着路径是正确的。此外，当我直接将一张图像（当图标文件夹位于 src 文件夹中）导入组件并在 img src 属性中使用它时，也会显示 svg 图像。你知道如何解决吗？ 这就是我所看到的

json 文件结构

 [
    {
        "id":0,
        "language": "English",
        "level":5,
        "img":"../../icons/uk.svg"
    },
    {
        "id":1,
        "language": "Spanish",
        "level":5,
        "img":"../../icons/spain.svg"
    },
    {
        "id":2,
        "language": "Italian",
        "level":4,
        "img":"../../icons/italy.svg"
    },
    {
        "id":3,
        "language": "French",
        "level":3,
        "img":"../../icons/france.svg"
    },
    {
        "id":4,
        "language": "Portuguese",
        "level":2,
        "img":"../../icons/portugal.svg"
    }

]

**组件代码**

import React from 'react'
import './Styles.css'
import communicationImg from '../images/communication.svg';
import dataLanguages from '../data/languagesData.json'
import { faStar } from "@fortawesome/free-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import img from '../../src/icons/france.svg'
function Languages()
{
   
  
 return(
     
        <div id='languages'>
            
            <h2>Languages</h2>
            <img className="images" src={communicationImg} alt="communicationImg"/>
            <div className="lang_content">
                {
                    dataLanguages.map((element)=>{
                        return(
                            <>
                            <div className="lang_container">
                                <div className="lang_img">
                                    <img className="lang_icon" src={element.img}/>
                                </div>
                                <div className="lang_label">{element.language}</div>
                                <div className="rating">
                                    {
                                         [...Array(element.level).keys()].map(()=><FontAwesomeIcon icon={faStar}></FontAwesomeIcon>)
                                    }
                                </div>
                            </div>
                            </>
                        )
                    })
                }
            </div>
        
        </div>
    
 )
}


export default Languages

Answer 1

使用webpack，您需要import 图像（如果它们不是公开的，即在src 文件夹中），see docs：

// Bad: src={element.img}
<img className="lang_icon" src={require(element.img)}/>

或者：

import ukImg from "../../icons/uk.svg"

[
    {
        "id":0,
        "language": "English",
        "level":5,
        "img": ukImg
    },
...
]

// Will Work
<img className="lang_icon" src={element.img}/>