Question

在我的应用程序中，我有一个包含大量图像的网页，其源URL是通过向 rails服务器发出请求来动态生成的，最初是为源分配了默认图像。加载页面后，我向服务器发出请求，返回带有新图像URl的json，然后需要更新该图像的src。以下是我在html.erb中使用的代码

<div class="inner">
 <div class="span9 blog-head alert alert-info"><h3><%=@feeds.title%></h3></div>
 <%@feeds.entries.each do|feed|%>
  <div class="thumbnail feeds span6">
   <div class="row title lead">
     <span class="span6"><%=link_to feed.title,feed.url,target: "_blank"%></span>
   </div>
   <div class="row content">
     <input type="hidden" class="image-feed-url" value="<%=feed.entry_id%>">
     <!-- need to update src of following img tag -->
     <img class="span2 desc-img thumbnail" src="/assets/default.jpg" alt="RSS">
     <span class="span3"><%=feed.summary%></span>
   </div>
   <div class="row footer">
     <%if feed.published%>
      <span class="span3">Published on: <small><%=feed.published.to_date.strftime("%b, %-d, %Y")%></span></small>
     <%end%>
     <span class="span2 source">Source: <small><%=link_to 'Click here',@feeds.url, target: "_blank"%></span></small>
   </div>
 </div>
 <%end%>
</div>

需要更新具有“desc-img”类的“img”标签中的src。在我的JS文件中

$(document).ready(function(){
  all_feeds = $('.inner .feeds')
  for(i=0;i<all_feeds.length;i++)
  {
    element = all_feeds[i]
    feed_url = $(element).find('.image-feed-url').val()
    $.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      // data['link] is the actual image link returned by server
      $(element).find('.desc-img').attr('src',data['link']);
    });
  }
});

我也曾尝试使用div与背景图片而不是img标签，并在JS中更新div的背景图片，但没有任何效果。我是Jquery和Ajax的新手，任何帮助都将不胜感激。

Answer 1

试试这个：

$.getJSON("/get_image_url?feed_url="+feed_url,function(data){
      $(element).find('.desc-img').removeAttr('src');
      $(element).find('.desc-img').attr('src', '../' + data['link'] + '?' + Math.random());
});

希望这有帮助。

使用ajax和jquery替换image src

1 个答案: