时间戳

首页 > 解决方案 > 如何为reactjs中的项目列表生成图像路径

reactjs - 如何为reactjs中的项目列表生成图像路径

问题描述

拥有一个项目列表，我尝试为每个项目分配一个图像，其中文件名等于项目的 ID：

 private static renderItemsTable(products: Product[]) {

    return <table className='table'>
        <thead>
            <tr>
                <th>Product view</th>
                <th>Name</th> 
            </tr>
        </thead>
        <tbody>
                {products.map(prod =>
                <tr key={prod.dateCreated}>                      
                    <td> <img src={require('../../Media/Images/ProductImages/' +prod.id +'.png')} alt= {prod.id} /></td>   
                    <td>{prod.name}</td>
               </tr>
                 )}
        </tbody>
    </table>;
}

在这种情况下，如果文件夹中不存在其中一个文件，则不会呈现整个表。

标签： reactjstypescript

解决方案

如何在渲染图像之前导入fs模块并检查文件是否存在

<td> <img src={require('../../Media/Images/ProductImages/' +prod.id +'.png')} alt= {prod.id} /></td>

像这样

<td>
    {fs.existsSync('Media/Images/ProductImages/' +prod.id +'.png') && (
        <img src={require('../../Media/Images/ProductImages/' +prod.id +'.png')} alt= {prod.id} />
    )}
</td>

请记住， fs 模块的某些功能需要来自当前工作目录的路径，换句话说，就是您启动 node 时的当前目录

推荐阅读