Je dois remplacer une image dans la section des commentaires de mon site Web. La section des commentaires est sur un serveur séparé (application tierce) et je n'y ai pas accès.
Le fournisseur de commentaires HTML Comment Box a ajouté des images et cela a fonctionné pendant 6 mois avant que les images ne deviennent 404 de leur part.
Je veux remplacer l'image cassée par une image de mon serveur.
J'ai essayé
#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;
}
mais je ne l'ai pas fait ' t travailler.
Le code tiers que je souhaite manipuler a été révélé par 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&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>
J'ai fini par remplacer l'image par du CSS à l'aide de pseudo sélecteurs
En gros, :: before et :: after ne s'appliquent que lorsque l'image ne se charge pas. Vous pouvez utiliser le positionnement absolu pour placer le pseudo élément CSS sur l'espace réservé de l'image cassée:
<script>
$(document).ready(function() {
document.getElementById("comment_14368294")[0].src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";
});
</script>
3 Réponses :
document.getElement s ById n'est pas une fonction. Je suppose que vous vouliez appeler getElementByid, et il ne renvoie qu'un nœud et non un tableau. Essayez ceci:
document.getElementById("comment_14368294").firstChild.src = "team-conasuaga-east-cowpen-trail-4_480px.jpg";
Oui, j'avais tapé Elements, ce qui était faux. J'ai essayé la solution que vous avez fournie. Malheureusement, cela n'a pas fonctionné.
Avec jQuery, vous pouvez sélectionner le conteneur contenant vos commentaires et votre requête pour le premier élément qui rend le commentaire unique. Vous pouvez ensuite hiérarchiser le tableau que vous obtenez et modifier l'image. Le seul problème que vous rencontrerez alors est de savoir si vous souhaitez appliquer la même image ou quelque chose d'unique.
J'ai créé cet exemple pour vous. Le conteneur de commentaires est l'élément que vous fournissez sur votre propre site Web dans lequel placer tous les commentaires. À partir de là, le premier div est ce qui rend le commentaire unique. Dans l'exemple, j'ai remplacé l'image différente par une autre similaire.
<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>
#comments-container>div {
margin: 20px !important;
}
$(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');
});
});
") .find ('img') .attr ('src', 'steam-conasuaga-east-cowpen-trail-4_480px.jpg');
Pourquoi vous appliquez le tableau dans votre code n'est pas tout à fait clair. Normalement, un id n'est utilisé qu'une seule fois dans un document. GetElementById () ne donnerait pas de tableau.
Malheureusement, cela n'a pas fonctionné. L'identifiant a été généré par l'application tierce. C'est mon site Web sur mon serveur mais une section de commentaires de tiers.
Comme vous souhaitez modifier le chemin de l'image uniquement en cas d'échec du chargement . Je suggérerai de lier l ' événement onerror à toutes les images.
Le code ci-dessous vérifiera tous les événements d'erreur d'image et réinitialisera le chemin avec votre chemin d'image par défaut si c'est ne parvient pas à se charger .
$(function(){
$(window).load("load",function(e){
var defImg = "default img url"; // Default image path
$(".comment").find("img").bind("error",function(){
$(this).attr("src",defImg);
});
})
})
J'ai utilisé $ window.load () pour lier mon événement car, selon votre question, vous êtes en utilisant le module tiers pour les commentaires. Il peut arriver que votre tiers n'ait pas terminé son rendu avant le déclenchement de l'événement Ready.
J'espère que cela vous aidera et mes excuses pour ma grammaire.
Veuillez nous fournir toutes les informations dont nous avons besoin pour répondre à votre question. Montrez-nous comment le code est implémenté. Est-ce une iframe? Est-il chargé via Ajax? Gardez à l'esprit que votre question sera très probablement lue par les futurs utilisateurs et qu'ils ne pourront pas dire ce qui se passe si votre site Web n'est plus disponible ou a complètement changé au fil du temps. Votre question doit contenir tout ce dont nous avons besoin pour y répondre sans avoir besoin de visiter un site Web externe.
Cela ne me permettra pas d'ajouter le code car je n'ai pas 10 messages. Le code comprend une image.
Ce n'est pas une iframe. Supposons que ce soit Ajax.
Oui, cela vous permettra d'ajouter du code. N'essayez pas de capturer votre code. Ajoutez simplement le code lui-même et assurez-vous que chaque ligne de code a plus de 4 espaces devant elle pour que Stack Overflow la reconnaisse comme du code. Si vous devez ajouter une image, fournissez simplement un lien vers l'image. Les utilisateurs plus réputés examineront l'image et modifieront votre question pour vous afin que l'image s'affiche.
Comme vous pouvez le voir, je viens de modifier votre question pour que la ligne de code devienne lisible. Cela fonctionne de la même manière :)
D'accord, merci beaucoup. J'ai ajouté le code de l'application tierce qui apparaît sur Chrome Inspector. C'est le code que je souhaite manipuler ou modifier. Je ne suis qu'un amateur.