时间戳

首页 > 解决方案 > 如何从第三方应用程序替换评论部分中的图像

javascript - 如何从第三方应用程序替换评论部分中的图像

问题描述

我需要在我网站的评论部分替换一张图片。评论部分位于单独的服务器（第三方应用程序）上，我无权访问它。

评论提供者 HTML 评论框添加了图像，它工作了 6 个月，然后图像变成了 404。

我想用我自己的服务器上的图像替换损坏的图像。

我试过了

<script>
$(document).ready(function() {
    document.getElementById("comment_14368294")[0].src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";
});
</script>

但没有用。

我想操作的第三方代码从 Chrome Inspector 显示

<div class="comment" id="comment_14368294">
    <span class="date">(Apr 7, 2019) </span>
    <span class="author hcb-mod"><b class="author-name">Conrad Easley (mod) 
    </b>said:</span>
    <blockquote>
    <img align="left" class="gravatar"
    src="https://www.gravatar.com/avatar/2484aca7544b9b228bbd67c0be236137?      
s=40&amp;d=http%3A%2F%2Fhtmlcommentbox.com%2Fstatic%2Fimages%2Fgravatar.png">
    Team Conasauga Workday on East Cowpen Trail April 6th, 2019 
    </blockquote>                   
    <a href="https://www.htmlcommentbox.com/storage/lg_14368294_team-conasuaga-east-cowpen-trail-4_480px.jpg">
    <img src="https://www.htmlcommentbox.com/storage/14368294_team-conasuaga-east-cowpen-trail-4_480px.jpg">
    </a>
    <p class="hcb-comment-tb">
    <a class="hcb-flag" href="javascript:hcb.flag('14368294')">
    <img src="https://www.htmlcommentbox.com/static/images/flag.png">flag
    </a> 
    <a class="hcb-like" href="javascript:hcb.like('14368294')">
    <img src="https://www.htmlcommentbox.com/static/images/like.png">like</a> 
    </p>
    <div class="likes" style="display:none">
    <span>0 </span>
    <img src="https://www.htmlcommentbox.com/static/images/like.png">
    </div>
</div>

我最终使用伪选择器用 CSS 替换了图像

基本上， ::before 和 ::after 仅在图像加载失败时应用。您可以使用绝对定位将 CSS 伪元素放置在损坏的图像占位符上：

#comment_14368294 img {
    position: relative;
    width: 480px;
    height: 360px;
    display: inline-block;
    vertical-align: text-top;
}

  #comment_14368294 img::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        line-height: 200px;
        background-color: #fd0;
        background: url(https://cohuttawildernesshiking.com/team-conasuaga-east-cowpen-trail-4_480px.jpg) no-repeat;
        color: currentColor;
        text-align: center;
        border-radius: 2px;
        display: block;
        width: 480px;
        height: 360px;
        overflow: hidden;
}

标签： javascriptjquerycssimagecss-selectors

解决方案

使用 jQuery，您可以选择保存您的评论的容器并查询使评论独一无二的第一个元素。然后，您可以遍历获得的数组并更改图像。您将要处理的唯一问题是您是否要应用相同的图像或独特的东西。

我为你创建了这个例子。评论容器是您在自己的网站上提供的用于放置所有评论的元素。从那里第一个 div 是使评论独一无二的原因。在示例中，我用类似的猫替换了不同的图像。

$(document).ready(function() {

  var comments = $("#comments-container").find("div");

  //console.log(comments);

  $(comments).each(function(i, item) {

    // console.log(item);

    $(item).find('img').attr('src', 'https://loremflickr.com/220/200/cat');

  });


});
#comments-container>div {
  margin: 20px !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='comments-container'>


  <div id="comment_1">
    <img src="https://loremflickr.com/320/240/dog" />
  </div>
  <div id="comment_2">
    <img src="https://loremflickr.com/320/240/girl" />
  </div>
  <div id="comment_3">
    <img src="https://loremflickr.com/320/240/boat" />
  </div>
  <div id="comment_4">
    <img src="https://loremflickr.com/320/240/statue" />
  </div>
  <div id="comment_5">
    <img src="https://loremflickr.com/320/240/guitar" />
  </div>



</div>

").find('img') .attr('src','steam-conasuaga-east-cowpen-trail-4_480px.jpg');

为什么在代码中应用数组还不是很清楚。通常 anid在文档中只使用一次。getElementById() 不会产生数组。

推荐阅读