无法从反应挂钩中的 public/images 文件夹获取图像

Question

使用multer处理图像并将图像路径保存到MySQL数据库中，同样的图像也已复制到public/images/文件夹中。请参阅随附的屏幕截图。

在 React hooks Home.js 屏幕中，当我尝试获取图像 src={photo} 时，出现错误 Cannot GET /public/images/photo-1592130487996.PNG

在 n/w 选项卡中，我得到的 json 响应如下所示， ...."privilege":"PLAYER","photo":"public\images\photo-1592130487996.PNG","position":"DEFENDER",....

server.js

app.use(express.static(path.join(__dirname, './public/images/')));

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './public/images/')
  },
  filename: function (req, file, cb) {
    var ext = file.originalname.split('.').pop();
    cb(null, file.fieldname + '-' + Date.now() + '.' + ext);
  }
})

var upload = multer({ storage: storage });

Home.js

const [searchResults, setSearchResults] = useState([]);

            {
              searchResults.map(({ id, photo, position, phonenumber, name }) => (
                <div key={id} className="grid-item">
                  {
                    deleteIcon.show && (
                      <span className="deletePlayerButton" onClick={deletePlayer(id)}>
                        <img className="deletePlayerimg" src="/images/delete.png"></img>
                      </span>
                    )}
                  <div>
                    <img alt="" className="playerProfilePic_home_tile" key={photo} src={photo}></img>
                  </div>
                  <div className="playerProfile_grid_border">
                    <span className="rec_name_position_data">
                      <h3 key={name}>{name}</h3>
                      <span className="playerPosition_home_tile" key={position}>{position}</span>
                    </span>
                  </div>
                  <span className="phoneNumber_home">
                    <img src="/images/phone.png" alt={"phoneTooltip.show"} key={id} name="phoneNumberhomeicon" onClick={displayPhoneToolTip(id)} />
                  </span>
                  {phoneTooltip === id && (
                    <div className="tooltip_PhoneNumber_home" key={phonenumber}>{phonenumber}</div>
                  )}
                </div>
              ))
            }

Answer 1

您需要执行以下步骤：

改变

app.use(express.static(path.join(__dirname, './public/images/')));

至

app.use(express.static(path.join(__dirname, 'public')));

因为您想从 public 文件夹而不是 public/images 文件夹提供静态文件。

在将路径保存到数据库之前，从图像路径中删除单词 public

或

在将 public 设置为 React 应用中 img 元素上的 src 属性的值之前，从图像路径中删除 public 一词。

要删除 public 单词，您可以使用 String.prototype.slice() or String.prototype.replace() 函数。

无法从反应挂钩中的 public/images 文件夹获取图像

Unable to get image from public/images folder in react hooks

reactjs

multer

react-hooks