通过 JSON 对象访问文件？答案

【问题标题】：Accessing a file through JSON object?通过 JSON 对象访问文件？
【发布时间】：2025-11-23 23:30:05
【问题描述】：

我在 react 文件中有一些路径，如下所示：

import azureIcon from './azure.png';
import dropboxIcon from './dropbox.png';

我还有一个单独的 JSON 文件，如下所示：

{
  "posts": [
    {
      "id": 1,
      "name": "azure",
      "description": "blah blah",
      "icon": "azureIcon"
    },
    {
      "id": 2,
      "name": "dropbox",
      "description": "blah blah",
      "icon": "dropboxIcon"

    }
  ]
}

是否可以让它像这样识别变量？还是因为当前“icon”的值设置为字符串值而不起作用？解决这个问题的好方法是什么？

谢谢！

【问题讨论】：

标签： arrays json reactjs object path

【解决方案1】：

直接这样做是不可能的，但你可以这样做

const icons = { azureIcon, dropboxIcon };

const MyComponent = () => {
  return (
    <div>
      {posts.map(post => (
        /*or w/e the correct way to normally render it is*/
        <img src={icons[post.icon]} />  
      )}
    </div>
  )
}

【讨论】：

工作就像一个魅力。谢谢！

【解决方案2】：

我建议将图像放在公共可访问的文件夹中。这里是 create-react-app 文档部分的example，以防你使用它。

所以为了简化你的代码，你可以使用这样的方法：

将图标放在 public 可访问的文件夹中（假设我们里面有图标文件夹）
更新您的配置

const posts = [
    {
      "id": 1,
      "name": "azure",
      "description": "blah blah",
      "icon": "azure.png"
    },
    {
      "id": 2,
      "name": "dropbox",
      "description": "blah blah",
      "icon": "dropbox.png"

    }
]

以这种方式显示图标

const Component = (posts) => (
    <React.Fragment>
       {posts.map(post => <img 
           key={post.id} 
           src={process.env.PUBLIC_URL + `/icons/${post.icon}`} 
       />}
    </React.Fragment>
)

【讨论】：

【解决方案3】：

如果我必须使用图标作为图像，我会选择the way @Kison suggests。但是如果你可以使用很棒的字体，那就太好了，这里展示了如何安装/导入字体很棒https://fontawesome.com/start，你可以在这里搜索图标@987654323 @ 并且您所要做的就是粘贴网站上的 html 代码，如下所示：
<i class="fab fa-accusoft"></i> 这将呈现 azure 图标和 <i class="fab fa-dropbox"></i> 这将呈现 Dropbox 图标。

这是两个图标的链接：
（天蓝色图标）https://fontawesome.com/icons/accusoft?style=brands
（投递箱图标）https://fontawesome.com/icons/dropbox?style=brands

【讨论】：