Question

我试图在jquery中显示图片，这些图片来自rails中的ajax请求。

这是我的Jquery代码;

<script>

    (function ( $ ) {

      $('#map-canvas').mapSearch({
        request_uri: 'locations/show.json', 
        initialPosition: [ <%= @initlat %> , <%= @initlng %> ],
        filters_form : '#filters',
        listing_template : function(listing){ 
          var pics = listing.pic.image.thumb.url
          pics = (pics.slice(1));
          console.log(pics)
                    return '<div class="listing">'
                      +     '<h3>'+listing.loc.address + '</h3>'
                      +   '<div class="row">'
                      +        '<div class="col-sm-2">'
                      +         '<img src= "pics" >' //HERE IS THE PROBLEM
                      +          '</div>'
                      +        '<div class="col-sm-5">'
                      +           '<p><strong>Address : </strong>' + listing.address+ '</p>'
                      +               '<p>'+listing.address+', '+listing.address+' '+listing.address+'</p>'
                      +               '<p>Reg Year: ' + listing.address+'</p>'
                      +          '</div>'
                      +        '<div class="col-sm-5">'
                      +         '<p><strong>demo:</strong> '+listing.address+'</p>'
                      +         '<p><strong>demo:</strong> '+listing.address+'</p>'
                      +          '</div>'
                      +   '</div>'
                      +  '</div>';
                  },
        marker_clusterer : true
      });
    }( jQuery ));

  </script>

控制台日志的工作原理为;

uploads/picture/image/987/thumb_images.jpg
uploads/picture/image/988/thumb_imgres-4.jpg
uploads/picture/image/989/thumb_imgres-3.jpg
uploads/picture/image/990/thumb_imgres-4.jpg

起初，我认为它会抛出错误，因为在链接的开头有一个正斜杠/uploads/picture/image/987/thumb_images.jpg，但是当我切片时，它仍然会出错。我认为+ '<img src= "pics" >'部分有问题。因为当我将路径直接放置为+ '<img src= "uploads/picture/image/987/thumb_images.jpg" >'时，它可以正常工作。但图片是动态的。我认为问题发生是因为'<img src= "pics" >'代码似乎是字符串而jquery没有将var pics变量放在那里。

谢谢！

Answer 1

您需要使用+连接变量。在javascript中了解here有关+运算符的更多信息

  '<img src= "'+pics+'" >'

Jquery中的渲染图像抛出500（内部服务器错误）

1 个答案: