Question

我有一个应用程序，我可以动态上传图像并通过给定的脚本在同一页面中显示它们。

JS

document.getElementById("picture").innerHTML = "<img src='absolute_server_url'/>";

HTML

<div id="picture">
</div>

问题是我的图片上传成功，但更新的图片未显示在html页面中。

图片名称也保持不变。我的意思是当我上传新图像时，我将该图像命名为与前一图像相同。可能这会造成问题。

Answer 1

您应该使用.src属性而不是.innerHTML，

像这样，

document.getElementById("profile").src = "your_image_url";

希望这有帮助！

Answer 2

试试这个;）

<div id="picture">
</div>

 <script>
     /* added timestamp to avoid cached data; */     
     document.getElementById("picture").innerHTML = "<img src='absolute_server_url?t=" + Date.now() + "' />";
 </script>

Answer 3

当您将图像上传到相同的文件名时，此图像可能会缓存在客户端上。

你可以通过cache-busting来解决这个问题。

示例中最简单的方法是将当前日期/时间作为查询字符串附加。

此外，不是使用innerHtml，而是最好构建img元素并设置src。

var img = document.createElement("img");
img.src = "absolute_server_url?dt=" + Date.now();
document.getElementById("picture").appendChild(img);

动态上传的图片未在html中显示

3 个答案: