Question

我有一个从json显示的标题列表。我还想将位置映射到相同json数据中的本地图像/或URL。因此，显示项目的每次迭代都包含其自己的图像。

问题在于需要js，这似乎仅在我传入具有图像位置的实际字符串时才起作用。如果我试图传递对json中的节点的引用，该节点保存该图像的位置，则它不起作用。注意：一些html标签来自物化。

工作：

  const imgPath=  require("../images/img1.jpg");
  <img src={ imgPath } alt=""/>

不起作用：

  const imgPath=  require({row.img});
  <img src={ imgPath } alt=""/>

{row.img}是json的关键。有没有办法在json中映射像这样的图像位置然后用它来动态显示它而不是以静态方式映射整个列表？

{
    "title":"title caption",
    "note":"Lorem ipsum dolor sit amet....",
    "img":"../images/img1.jpg",
    "iconType":""
}

渲染组件：这就是我希望它工作的方式：

    render() {

        let rows = dataJson.map(function(row){
            return <CollapsibleItem header={row.title} icon={row.iconType}>
                    <div>{row.note}</div>
                    <img src={ row.img } alt=""/>
                </CollapsibleItem>
        })

        return (
            <div className="container">
                <div>
                    <Collapsible>
                        {rows}
                    </Collapsible>
                </div>
            </div>
        );
    }

如果我以静态方式将图像导入到组件中，它也可以正常工作：

    import img01 from "../images/img1.jpg";

并将{row.img}替换为{img01}

    <img src={ img01 } alt=""/>

有可能吗？我发现了一些使用webpack从目录导入一堆图像的例子，但不同之处在于我希望将图像的路径映射到我的json内部，以便我可以相应地将图像添加到特定列表的项目中。谢谢你的任何想法。

从json中反映动态映射图像路径

0 个答案: