Question

我正在尝试刷新页面上的图像，但它没有发生。我有一个带图像的页面，我需要根据需要更新这些图像。要更新图像，我将图像上传到灯箱，然后关闭灯箱。页面上的图像应自行更新。现在，我尝试了$（'＃imageid'）。attr（'src'，newimage）。我想在这里特别提一下，旧图像和新图像的名称是相同的。我觉得这是问题所在。如果我硬编码任何其他图像，它会在灯箱关闭后立即出现。但是，当我尝试通过为'src'属性添加相同的图像名来刷新图像时，没有任何反应。

有人可以帮我解决这个问题并显示更新的图片。

感谢。

编辑：它可能是缓存吗？

Answer 1

可能有一个更好的解决方案，但你可以抛出一个参数来强制新的图片加载。

即：将src设置为newImage+"?"+(new Date()).getTime()

Answer 2

如果src是“foo.png”而您将src设置为“foo.png”，我认为该分配可能会被浏览器优化为无操作。您是否尝试将src设置为“”，然后将其设置为名称？这应该记录为一个变化。

Answer 3

此方法有点复杂，但仅在无法更改图像源名称但必须在buttonclick（）上刷新图像的情况下才有用。这在摆弄涉及浏览器中图像处理的代码时非常有用。

Step1 ：创建一个容器，例如div。
Step2 ：将标记保存在另一个html文件中。
Step3 ：在容器内创建一个包含图片的iframe。

让容器的ID为＃image;＃image＆＃39;并且图像的id是＆＃34;＃img＆＃34;和iframe的ID是＆＃34;＃cont＆＃34;

然后在要使用相同名称刷新图像的块中执行以下操作。

$('#image').remove();
$('#cont').remove();
$('#img').append(' <iframe src="add.html" id="cont"></iframe> ');

以下是通常在按钮点击事件中插入的代码，用于更改或重新加载图像，在其案例中具有相同的名称

＆＃13;

<div id="img">
<img id="image" src="uploads/initial_image.jpg"  >
</div>

＆＃13;

以下是可以刷新的iframe的HTML。

＆＃13;

<img src="effects/intermediate.jpg" id="image">

＆＃13;

此段将确保删除页面上显示的初始图像，并在按钮点击时刷新新的iframe。

Answer 4

浏览器未注册任何更改。因此，传递随机函数将迫使浏览器在DOM中进行更改。下面是使用的jquery和HTML

$('#uploaded_image').attr('src',data+'?'+Math.random());

<img src="logo.png?1576573831" class="NO-CACHE img-responsive p-b-10" id="uploaded_image">

jQuery - 使用attr（'src'，newimage）刷新同名图像的问题

4 个答案: