javascript 我试图插入一个动画GIF到网页，虽然这插入代码正确，它不更新网页的内容

jchrr9hc 于 2023-04-04 发布在 Java

关注(0)|答案(3)|浏览(112)

我用JavaScript在一个背景上放置一个GIF，虽然这会创建下面的文本，但它不会更新页面，我不确定为什么没有人可以帮助？
表中HTML中的节为<div id = 'DJ' class='DJvid' ></div>
在调试器中，如果我在控制台中输入变量，它会在object_dj中返回以下内容：<div id="DJ" class="DJvid" style="background-image: url(http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif)"></div>
我也试过用它也返回这个内容作为背景图像：“";

object_dj = document.getElementById("DJ");
object_dj.style.backgroundImage = url("images/bandicam-2023-03-31-14-59-01-846.gif");

我甚至尝试使用正确的URL object_dj.style.backgroundImage = 'http://d.ezyro.com/images/bandicam-2023-03-31-14-59-01-846.gif';
object_dj.style.backgroundImage还是“”怎么回事我可以用样式表设置这个

.DJvid {  
   background-image:url("images/background3.png");
   height:250px;
   background-repeat: no-repeat; 
   background-size: 250px,350px;
   background-position: bottom;
   width:400px;
   
 
}

我已经尝试了我能做的一切。pUrl获取URL，但它从来没有将其分配给object_dj.style.backgroundImage，并将this分配给URL（）返回“”pUrl中有URL“http://d.ezyro.com/images/ezgif-2-f0284e7093b1.gif“（不是真实的的URL）。url（）似乎不起作用，可能是因为它不是https而是http？：

pImageUrl = "images/bandicam-2023-03-31-14-59-01-846.gif";
pUrl =  baseURL + pImageUrl;
object_dj.style.backgroundImage = pUrl;

我又试了一下才删除
$('DJ').css("backgroundImage","url(pUrl)");
这在调试器控制台仍然没有给出任何在div背景和屏幕上没有变化
Console：object_dj.style.backgroundImage ''
我使用的JavaScript是

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
object_dj.setAttribute('style', 'background-image: url('+baseURL+'images/ezgif-2-f0284e7093b1.gif)');

对不起，您访问的页面不存在。
现在，这一步的作品必须有一个失踪的重画或东西，也许你可以引导我得到这个工作更新页面。
我试着用一些垃圾改变数据：

object_dj.style.opacity=0.99;
setTimeout(()=> {object_dj.style.opacity=''},0);

也尝试和验证的图像：

var imageUrl = "images/bandicam 2023-03-31 14-59-01-846.gif";
const pUrl = new URL(baseURL, imageUrl);
object_dj.style.backgroundImage = `url("${pUrl}")`;

错误

VM 313：1未捕获的引用错误：imageURL未在eval（eval at（music_now_playing.php：1：1），：1：1）at：1：1定义
我试着添加变量它决定不给予错误。
这是从控制台你的例子不加载url在我的网站：

bpm
<div class="hidden" id="#bpm">196</div>
imageUrl
'images/bandicam 2023-03-31 14-59-01-846.gif'
object_dj.style.backgroundImage

pUrl
VM110:1 Uncaught ReferenceError: pUrl is not defined
    at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
    at <anonymous>:1:1
eval @ VM110:1
(anonymous) @ VM96:1
baseURL
'http://d.ezyro.com/'
imageURL
VM147:1 Uncaught ReferenceError: imageURL is not defined
    at eval (eval at <anonymous> (music_now_playing.php:1:1), <anonymous>:1:1)
    at <anonymous>:1:1

这似乎是imageURL导致的问题？
我也试过：stackflow.com/questions/8840580/force-dom-redraw-refresh-on-mac但没有一个答案起作用。有没有一种新的方法来做到这一点？
object_dj.scrollBy（0，0）;形式，它没有识别jQuery.fn.redraw（）中的jQuery

JavaScript

来源：https://stackoverflow.com/questions/75907668/i-am-trying-to-insert-an-animated-gif-into-a-web-page-although-this-inserts-code

3条答案

按热度按时间

4uqofj5v1#

假设服务器给你的图像是正确的...它可能会被缓存在某个地方？重绘或以其他方式强制重新渲染可能会起作用。像这样尝试smth：

object_dj = document.getElementById("DJ");
baseURL = "http://d.ezyro.com/";
imageUrl = baseURL + "images/ezgif-2-f0284e7093b1.gif";
object_dj.style.backgroundImage = "url(" + imageUrl + ")";
object_dj.parentNode.removeChild(object_dj);
object_dj.parentNode.appendChild(object_dj);

赞(0）回复(0）举报 2023-04-04

yizd12fk2#

我会这么做
首先，可能是找不到URL的某种问题。因此，请确保您尝试提供的图像确实存在。如果图像确实存在，也可能是您的基本URL和路径没有正确连接，从而创建了一个不存在的URL。为了确保正确连接，请不要自己插入字符串。相反，最好的做法是让URL API为您做这件事。
此外，我发现将.style.backgroundImage设置为适当的值比使用.setAttribute()更容易，但是，这本质上是相同的过程。
下面是我编写的一些代码的示例。注意：我更改了示例URL，因为您问题中的URL不存在：

const base = 'https://www.cutecatgifs.com';
const path = 'wp-content/uploads/2013/06/Monday.gif';
const el = document.getElementById('content');

const url = new URL(path, base);
el.style.backgroundImage = `url("${url}")`;

#content {
  color: red; /* just for visibility */
  width: 300px;
  height: 300px;
}

<div id="content">
  Example content
</div>

赞(0）回复(0）举报 2023-04-04

krugob8w3#

答案是Apache服务器非Windows服务器

pImageUrl = "images/bandicam-2023-03-31-14-59-01-846.gif";
pUrl =  baseURL + pImageUrl;
object_dj.style.backgroundImage = "url(" + pImageUrl + ")";

这现在的功能。它不知何故不希望完整的网址，并更好地如上所述，以允许它的工作。
谢谢你所有的建议，让我通过这一工作，它非常赞赏和大量的爱！

赞(0）回复(0）举报 2023-04-04

我来回答

javascript 我试图插入一个动画GIF到网页，虽然这插入代码正确，它不更新网页的内容

3条答案

相关问题

热门标签

最新问答