Node.js 反应&；节点（Multer）：当图像存在于该路径上时，该路径找不到该图像

您好，我在我的网站上有图像上传功能，它与NodeJS（Express）一起上传到特殊文件夹中，但问题是，当用户上传该图像时，他会被重定向到新创建的路径，并且在该路径上应该显示该图像，但它甚至认为它不存在 以下是multer代码：

const imgStorageBaseURL = '/images'
const imgStoragePath = path.join(__dirname, '..', 'images');
const storage = multer.diskStorage({
  destination: (req, file, callback) => {
    const userPath = path.join(imgStoragePath, req.userId);
    fs.mkdir(
      userPath,
      () => callback(null, userPath)
    )
  },


  filename: (req, file, callback) => {
    const filenameParts = file.originalname.split('.');
    const ext = filenameParts.pop();
    const basename = filenameParts.join('.');
    const additionalPath = Date.now() + '' +  Math.floor(Math.random() * (2000 - 500)) + 500;
    callback(null, basename + '-' + additionalPath + '.' + ext);
  }
})

这是图像链接的数组（将链接保存到数据库中）

和反应代码

     {this.state.imageURLs.map((src, k)=>{
         return (
             <img src={src} key={k} alt="Hey" className="img"/>
         )
     })}

{this.state.imageURLs.map（（src，k）=>{
返回(
)
})}

检查元素中没有源

这是图像存在于该路径上的证据

但当我访问源代码中的url时，我得到了这个

造成这种误解的原因是什么

---

谢谢大家!

尽管映像存在于文件系统中，但它与web服务器（即您的应用程序）的“相对”位置不正确

通常，图像被放置在为静态文件指定的单独区域。如果您使用了

创建react app

来构建应用程序，则可以从

的“public”

文件夹访问图像

render() {
  // Note: this is an escape hatch and should be used sparingly!
  // Normally we recommend using `import` for getting asset URLs
  // as described in “Adding Images and Fonts” above this section.
  return <img src={process.env.PUBLIC_URL + '/img/logo.png'} />;
}

render（）{
//注意：这是一个逃生舱，应谨慎使用！
//通常，我们建议使用“导入”来获取资源URL
//如本节上文“添加图像和字体”所述。
返回；
}

这是你的电话号码

具体而言，您应该将react代码更新为：

 {this.state.imageURLs.map((src, k)=>{
     return (
         <img src={process.env.PUBLIC_URL +src} key={k} alt="Hey" className="img"/>
     )
 })}

{this.state.imageURLs.map（（src，k）=>{
返回(
)
})}

---

只需确保将图像移动或更新将图像从multer/express保存到公用文件夹的路径。

我在公用文件夹中有一个名为imagesis的单独文件夹，它位于公用文件夹中？是的，react应用程序在公用文件夹中查找/images，因为它是一个静态资产。您还需要在ur src之前添加“process.env.PUBLIC\u URL”。首先尝试与图像有。然后，您可以更新服务器代码以将图像上载到该路径。如果我在服务器文件中添加此行

app.use（'/images'，express.static（'/images'））

，该怎么办？如果您需要这样做，那么您需要追加

”http://localhost:8000/“

添加到您的src内部图像标签。因此，每次从服务器获取时（8000或您的服务器端口是什么）

 {this.state.imageURLs.map((src, k)=>{
     return (
         <img src={process.env.PUBLIC_URL +src} key={k} alt="Hey" className="img"/>
     )
 })}