使用 DOM 操作未更新图像答案

【问题标题】：Image not Updating using DOM manipulation使用 DOM 操作未更新图像
【发布时间】：2022-08-17 10:51:29
【问题描述】：

我正在尝试根据条件在 2 个图像之间切换。我正在考虑更改img 标签的src。我可以更改src，但在网页上图像没有得到更新。

有人可以指出应该在哪里使用或更新什么。

这是我的JS代码->

success: function(data){
        if(data.status == 200){
          if(data.message == \"Liked\"){
            document.getElementById(\"like_image_state_change\").src=\"{% static \'FrontEnd1/Static_Images/CovrPage_Like_R.png\' %}\";

          } 
          else if(data.message == \'Like Removed\'){
            document.getElementById(\"like_image_state_change\").src=\"{% static \'FrontEnd1/Static_Images/CovrPage_Like_W.png\' %}\";
            console.log(document.getElementById(\"like_image_state_change\"));
          }
        }
        else{
          console.log(\'wrong\');
        }
      }
    });

在这里，当我在 \'like Removed\' 中控制台 document.getElementById 时，我可以看到更新后的 src 图像，但网页上的图像仍然相同。

PS -> 我使用的后端是 DJango。（如果重要的话）

要么您的图像缓存路径错误，要么页面上有多个具有相同 ID 的元素。
绝对的男人。我刚刚意识到我有不止一个元素具有相同的类。谢了哥们
具有相同类的多个元素应该没问题；类旨在用于元素组。但是无论如何，您在这里都没有按类引用任何内容。
是的，我明白你的意思。实际上我正在使用 django 模板渲染多个帖子并使用 ID。但我会把它改成课堂。不管怎么说，还是要谢谢你。

标签： javascript django dom-events dom-manipulation

【解决方案1】：

您可以使用

document.getElementById("like_image_state_change").style.backgroundImage=url("FrontEnd1/Static_Images/CovrPage_Like_R.png")

【讨论】：