时间戳

首页 > 解决方案 > 使用 nodejs 在 reactjs 中加载图像

node.js - 使用 nodejs 在 reactjs 中加载图像

问题描述

我正在尝试使用以下代码加载存储在我的数据库文件夹中的图像：

<Carousel autoplay>
            {props.images.map((image, index) => (
                <div key={index}>
                    <img style={{ width: '100%', maxHeight: '150px' }}
                        src={`http://localhost:5000/${image}`} alt="productImage" />
                </div>
            ))}
        </Carousel>
    </div>

但我收到此错误： 错误

存储在数据库中的图像是这样的：

{
          "images": [
            "uploads\\1596557942509_discount.png"
          ],
          "categories": 3,
          "_id": "5f298a8f205d0e109c896979",
          "productname": "Justchecking",
          "price": "444",
          "shopadress": "Checking",
          "contactdetails": "9999999",
          "createdAt": "2020-08-04T16:19:27.168Z",
          "updatedAt": "2020-08-04T16:19:27.168Z",
          "__v": 0
        },

标签： node.jsreactjsmongodb

解决方案

如果你在 Node.js 后端使用文件夹，你应该设置serve static

如果已设置服务静态，请检查静态链接是否正确。

另外，检查图像数组中的链接是否正确（尤其是两个反斜杠）

最后，错误提示找不到图片，所以在粘贴之前，请尝试将绝对图片 URL 粘贴到浏览器并检查它。如果您将解决上述问题，它应该可以工作

推荐阅读