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

Posted 2023-03-27

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

【英文标题】：React - cannot display svg images which path is stored in json file

【发布时间】：2021-02-17 10:01:48

【问题描述】：

我有一个 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 />
            <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

【参考方案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/>

【讨论】：

我试过这个但我得到以下错误：“错误：找不到模块'../icons/uk.svg'”

但是当我像这样直接在组件中导入 svg 时（从 '../icons/france.svg'; 导入 img），使用存储在 json 文件中的相同路径并使用变量在 src 属性 () 中显示 svg。