Обработайте изображение с помощью multer и сохраните путь к изображению в базе данных MySQL, и это же изображение было скопировано в папку public/images/. См. Прикрепленные снимки экрана.

На экране перехватчиков React 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>
              ))
            }

enter image description here

enter image description here

enter image description here

1
soccerway 14 Июн 2020 в 14:04

1 ответ

Лучший ответ

Вам необходимо сделать следующие шаги:

  1. изменение

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

    к

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

    потому что вы хотите обслуживать статические файлы из папки public, а не из папки public/images.

  2. Перед сохранением пути в базе данных удалите слово public из пути к изображению.

    ИЛИ

    Удалите слово public из пути к изображению, прежде чем устанавливать его в качестве значения атрибута src в элементе img в приложении реакции.

Чтобы удалить слово public, вы можете использовать String.prototype.slice () или String.prototype.replace ().

2
Yousaf 14 Июн 2020 в 12:54