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

Posted 2023-05-08

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

【英文标题】：How to replace an image in a comment section from a third party application

【发布时间】：2019-12-18 12:37:38

【问题描述】：

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

评论提供者 html 评论框添加了图像，并且在图像变成 404 之前它工作了 6 个月。

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

我试过了

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

【问题讨论】：

请向我们提供回答您的问题所需的所有信息。向我们展示代码是如何实现的。它是一个 iframe 吗？它是通过 Ajax 加载的吗？请记住，您的问题很可能会被未来的用户阅读，如果您的网站不再可用或随着时间的推移完全改变，他们将无法知道发生了什么。您的问题应该包含我们需要的所有内容，以便在无需访问某些外部网站的情况下进行回答。

它不允许我添加代码，因为我没有 10 个帖子。代码包含一张图片。

它不是 iframe。假设它是 Ajax。

是的，它将允许您添加代码。不要尝试截取您的代码。只需添加代码本身并确保每行代码前面都有 4+ 个空格，以便 Stack Overflow 将其识别为代码。如果您必须添加图像，只需提供指向该图像的链接。具有较高声誉的用户将查看图片并为您编辑您的问题，以便显示图片。

如您所见，我刚刚为您编辑了您的问题，因此代码行变得可读。它的工作方式相同:)

【参考方案1】：

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

我为您创建了这个示例。 cmets 容器是您在自己的网站上提供的用于放置所有 cmets 的元素。 从那里开始，第一个 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() 不会产生数组。

【讨论】：

不幸的是，它没有用。 id 是由第三方应用程序生成的。这是我服务器上的网站，但有第三方评论部分。

【参考方案2】：

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

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

【讨论】：

是的，我输入了错误的元素。我尝试了您提供的解决方案。不幸的是，它没有用。

【参考方案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() 绑定我的事件，因为根据您的问题，您正在使用第三方评论模块。在某些情况下，您的第三方在 ready 事件触发之前还没有完成渲染。

希望对我的语法有所帮助和道歉。