使用 nodejs 在 reactjs 中加载图像答案

【问题标题】：Loading Images In reactjs using nodejs使用 nodejs 在 reactjs 中加载图像
【发布时间】：2020-08-06 18:03:46
【问题描述】：

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

<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>

但我收到此错误： error

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

{
          "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.js reactjs mongodb

【解决方案1】：

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

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

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

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

【讨论】：

【解决方案2】：

我已经在编辑器中尝试了您的代码，并且正在形成的 url 显示在输出中。请尝试在浏览器中打开图片，如果不行，请更正路径并尝试。

即将出现的错误是因为您的图像路径不正确。

["uploads\\1596557942509_discount.png", "uploads\\1596557942509_discount.png"].map((image, index) => (
                console.log("http://localhost:5000/" + image)
            ))

您的图像输出是：

"http://localhost:5000/uploads\1596557942509_discount.png"
"http://localhost:5000/uploads\1596557942509_discount.png"

【讨论】：

【解决方案3】：

我的猜测是您使用 Webpack 进行捆绑。由于其内部模块管理流程，Webpack 需要为图像源“要求”动态路径。 Here 是类似实现的一个很好的示例。而且我认为this 和this 将帮助您更接近问题的根源。还有一点值得注意。如here 所述，使用数组索引作为子组件的“键”是一种反模式。您可以为键重用组件 ID。

【讨论】：

【解决方案4】：

我不明白您的图像是如何存储的？是否仅存储名称并且您将其保存到服务器？
也许尝试 multer 和 sharp 将图像转换为缓冲区然后检索它。

<img src={bufferImage!=''?`data:image/jpeg;base64,${bufferImage}`:"https://reactbootstrap.netlify.app/logo.svg"} />

用户 multer 和 sharp 在后端。所以也许与其节省 uploads\\1596557942509_discount.png 最好有类似
{ uploads\\1596557942509_discount.png : daskdas... }

【讨论】：