Блог

здесь немного странно. Я попытался найти ответ, но не смог. Новичок в узле.

Проблема: Мои пути к виртуальным изображениям работают в моих представлениях, но не в моем частичном представлении, являющемся навигационной панелью. На этой навигационной панели есть панель поиска, и она извлекает суккулентные растения из базы данных со следующим кодом:

 let searchBar = document.getElementById("searchBar");

searchBar.addEventListener("keyup", searchDatabase);

function searchDatabase() {
  const searchResults = document.getElementById("searchResults");
  //Reg expressions prevent special characters and only spaces fetching from db
  let match = searchBar.value.match(/^[a-zA-Z ]*/);
  let match2 = searchBar.value.match(/s*/);

  if (match2[0] === searchBar.value) {
    searchResults.innerHTML = "";
    return;
  }

  if (match[0] === searchBar.value) {
    fetch("searchSucculents", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ payload: searchBar.value }),
    })
      .then((res) => res.json())
      .then((data) => {
        let payload = data.payload;
        searchResults.innerHTML = "";
        if (payload.length < 1) {
          searchResults.innerHTML = "<p>No search results found</p>";
          return;
        } else if (searchBar.value === "") {
          searchResults.innerHTML = "";
          return;
        } else {
          payload.forEach((item, index) => {
            if (index > 0) {
              searchResults.innerHTML  = "<hr>";
            }
           
            searchResults.innerHTML  = 
                `<div class="card" style="width: 18rem;">
                    <img src="${item.SucculentImagePath}" class="card-img-top" alt="${item.SucculentName}">
                    <div class="card-body">
                        <p class="card-text">${item.SucculentName}</p>
                    </div>
                </div>`;      
          });
        }
        return;
      });
  }
  searchResults.innerHTML = "";
}
 

Вот маршрут:

 app.post("/searchSucculents", async (req, res) => {
  let payload = req.body.payload.trim();
  let search = await Succulent.find({SucculentName: {$regex: new RegExp("^" payload ".*","i")}}).exec();
  //Limit Search Results to 10
  search = search.slice(0, 10);
  res.send({payload: search});
})
 

Вот часть моей схемы, определяющая путь к изображению:

     succulentSchema.virtual('SucculentImagePath').get(function() {
    if (this.SucculentImage != null amp;amp; this.SucculentImageType != null) {
      return `data:${this.SucculentImageType};charset=utf-8;base64,${this.SucculentImage.toString('base64')}`
    }
  })
 

Я могу ссылаться на этот путь изображения в моих полных представлениях следующим образом:

 <img src="<%= succulent.SucculentImagePath %>">
 

Однако, когда я пытаюсь получить доступ к атрибуту SucculentImagePath в этой строке поиска в моей навигации, он не определен. Я что-то здесь упускаю?

Проведя дальнейшие исследования, я обнаружил, что вы не можете использовать виртуалы мангуста при анализе данных в JSON (ошибка noob, я знаю).

Я исправил это, добавив это в качестве опции в объект схемы:

 toJSON: { virtuals: true } })