Javascript 将图像添加到json搜索栏

我已经使用ajax和json创建了一个搜索栏，但我在添加图像时遇到困难，每当我尝试添加图像时，它就会停止搜索功能。这是我试图添加图像的代码：

  output +='<img src="images/' + val.imageref +'" />';

有人对我如何添加图像有什么建议吗

完整代码：

   <label for="search">Search <a href="#"><img src="images/search.jpg"></a></label><input type="search" name="search" class="tool" title="Type in a product name or category to get started" id="search" placeholder="Product..." />


                </div>
      <div id="update"></div>
      <script>
     $('#search').keyup(function(){
      var searchField = $('#search').val();
     var myExp = new RegExp(searchField, 'i');
     $.getJSON('search.json', function(data){
      var output = '<ul class="searchresult">';
      $.each(data, function(key, val){
        if((val.brand.search(myExp) != -1) || (val.type.search(myExp) != -1)) {
          output +='<h1>' + val.brand + '</h1>';
          output +='<h2>' + val.product + '</h2>';
          output +='<img src="images/' + val.type +'/'+ val.brand + val.product + '.jpg" />';
          output +='<p>' + val.price +  '</p>';
          output +='</li>';
        }
      });
      output += '</ul>';
      $('#update').html(output);
    });
  });
  </script>

搜索
$（“#搜索”）.keyup（函数（）{
var searchField=$（'#search'）.val（）；
var myExp=new RegExp（searchField，'i'）；
$.getJSON（'search.json'，函数（数据）{
var输出='
；
$。每个（数据、函数（键、值）{
if（（val.brand.search（myExp）！=-1）| |（val.type.search（myExp）！=-1））{
输出+=''+val.brand+''；
输出+=''+val.product+''；
输出+=''；
输出+=''+val.price+'
'；
输出+=''；
}
});
输出+='
'；
$（'#update'）.html（输出）；
});
});

在引用输出变量中的路径时，您似乎在复制图像目录。除非images/images/dogbool.jpg是您的图像所在的位置。您可以尝试使用托管映像进行测试，以确保它不是文件路径问题

---

您是否可以在codepen或其他服务中提供更多详细信息的代码示例？

您显然在复制

图像/

。简而言之，您的标记正在查找位于

images/images/

中的图像。这是有意的还是。。？（因为它将第一种情况下的

images/

与

images/dentastix.jpg

连接起来，作为一个例子）如果可能的话，在这里创建fiddle…hi当我编辑上面的问题以包含整个代码时，如果你能看一下，那将非常有帮助。同时，如果我把图像行的一部分移走，它会停止搜索。hi@Hoffination我编辑了一个关于包含所有代码的问题，如果你能看一下，那将非常有帮助

   <label for="search">Search <a href="#"><img src="images/search.jpg"></a></label><input type="search" name="search" class="tool" title="Type in a product name or category to get started" id="search" placeholder="Product..." />


                </div>
      <div id="update"></div>
      <script>
     $('#search').keyup(function(){
      var searchField = $('#search').val();
     var myExp = new RegExp(searchField, 'i');
     $.getJSON('search.json', function(data){
      var output = '<ul class="searchresult">';
      $.each(data, function(key, val){
        if((val.brand.search(myExp) != -1) || (val.type.search(myExp) != -1)) {
          output +='<h1>' + val.brand + '</h1>';
          output +='<h2>' + val.product + '</h2>';
          output +='<img src="images/' + val.type +'/'+ val.brand + val.product + '.jpg" />';
          output +='<p>' + val.price +  '</p>';
          output +='</li>';
        }
      });
      output += '</ul>';
      $('#update').html(output);
    });
  });
  </script>