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

Question

我需要替换我网站评论部分中的图像。评论部分位于单独的服务器(第三方应用程序(上，我无法访问它。

评论提供程序 HTML 评论框添加了图像，并且在图像变为 404 之前工作了 6 个月。

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

我试过了

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

但没有用。

我要操作的第三方代码从Chrome检查器中显示

<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;
}

Answer 1

使用 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'(;

为什么在代码中应用数组还不太清楚。通常，一个id在文档中只使用一次。getElementById(( 不会生成数组。

Answer 2

document.getElementsById 不是一个函数。我假设你想调用getElementByid，它只返回一个节点而不是数组。试试这个：

document.getElementById("comment_14368294").firstChild.src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";

Answer 3

因为您希望仅在图像加载失败时更改图像的路径。我建议将onerror 事件绑定到所有图像。

下面的代码将检查所有图像错误事件，如果加载失败，则使用默认图像路径重置路径。

$(function(){   
$(window).load("load",function(e){  
var defImg = "default img url"; // Default image path
$(".comment").find("img").bind("error",function(){
$(this).attr("src",defImg);
}); 
})
})

我使用$window.load((来绑定我的事件，因为根据您的问题，您正在使用第三方评论模块。在某些情况下，您的第三方在就绪事件触发之前尚未完成其渲染。

希望它能帮助并为我的语法道歉。