ReactJS：图像显示无法正常工作

Question

所以我在上传图片时遇到了这种情况。在前端，它的 React Js 和后端 Node Js。图片上传正常，但是当我必须在前端显示它们时，它不起作用。

我正在使用 react-image-gallery 来显示这样的图像：

<ImageGallery
   items={this.state.currentImages}
   lazyLoad={true}
   ref={this.myRef}
   showIndex={true}
/>

这就是 this.state.currentImages 中的内容：

[
    {
        "original": "/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg",
        "thumbnail": "/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg"
    }
]

在浏览器中路径变为：

http://localhost:3000/var/www/html/ciaoOrderTaking/projects/ciao_full_stack/uploads/images/items/IMAGE-1645782694696.jpg

我怎样才能让它发挥作用？有什么解决办法吗？

Answer 1

您必须制作 URL 并在后端静态提供您上传的文件，例如，您的后端端口是 3000，并且您已经在 nodejs 后端静态提供上传文件夹。上传文件夹结构：上传 -> 图片 -> 项目 -> IMAGE-1645782694696.jpg 现在你的文件 URL 将变成： http://localhost:3000/images/items/IMAGE-1645782694696.jpg

所以在前端创建一个函数，将您的图像 url 转换为可访问的文件 URL，例如：

const toAbsoluteURL=(url)=>{
  return `http://localhost:3000/${url}` // note that this is backend url
}

并将函数映射到图像数组。

images=images.map((url)=>toAbsoluteURL(url?.original)); // now images array have accessible file urls

您可以根据需要使用上述功能使 URL 可访问。

Answer 2

事实证明，这就是答案。

https://expressjs.com/en/starter/static-files.html

ReactJS：图像显示无法正常工作

ReactJS: Image display not working correctly

javascript

node.js

reactjs

image-upload