虚拟图像路径在部分视图中不可见

Posted 2023-03-11

【中文标题】虚拟图像路径在部分视图中不可见

【英文标题】：Virtual Image Path not visible in partial View

【发布时间】：2021-11-29 10:35:51

【问题描述】：

这里有点奇怪。我试图找到答案，但无法找到。新节点。

问题：我的虚拟图像路径在我的视图中有效，但在我的部分视图中无效，即导航栏。这个导航栏有一个搜索栏，它正在获取数据库中的多肉植物，代码如下：

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" >
                    <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 && this.SucculentImageType != null) 
      return `data:$this.SucculentImageType;charset=utf-8;base64,$this.SucculentImage.toString('base64')`
    
  )

我可以在我的完整视图中引用此图像路径，如下所示：

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

但是，当我尝试在导航的此搜索栏中访问 SucculentImagePath 属性时，它是未定义的。我在这里遗漏了什么吗？

【参考方案1】：

经过进一步研究，我发现在将数据解析为 JSON 时不能使用 mongoose virtuals（我知道这是菜鸟的错误）。

我通过在模式对象中添加它作为选项来修复它：

toJSON:  virtuals: true  )