如何使用javascript更改div中的图像src？

Posted 2023-03-05

【中文标题】如何使用javascript更改div中的图像src？

【英文标题】：How to change image src in a div with javascript?

【发布时间】：2015-11-15 12:21:27

【问题描述】：

我正在使用 videojs 构建一个网站来播放视频并在正在播放的视频的某个时间点将一些图像插入到页面中。我使用下面的代码来获取当前时间并在“imageContext”div 中插入图像。

<script type="text/javascript">
    var myPlayer = document.getElementById("example_video_1");
    var added = false;
    var ShowAds=function()
        var time = myPlayer.currentTime;
        var img = document.createElement('IMG');
        div = document.getElementById("imageContext");
        div.style.width = '100px';
        div.style.height = '100px';
        div.style.display = 'inline-block';

        if(time > 30 && time <= 40 && !added)
            //img.onload = function()
            div.appendChild(img);
            added = true;

            img.setAttribute("src",'/Applications/MAMP/htdocs/shqc.jpg');

            img.style.width = '100%';
            img.style.height = 'auto';
        else if(time > 70)
            //change to another image in the same position
        

    
    myPlayer.addEventListener('timeupdate',ShowAds,false);
</script>

如果我想在时间更改为第 90 秒时在页面上显示另一张图片怎么办？或者有什么方法可以使用javascript删除页面上的图像？谢谢！

为了清楚起见，我试着把

img.setAttribute("src",'/Applications/MAMP/htdocs/yy.jpeg');

else下不行

【问题讨论】：

然后在时间为 90 时再做一次img.src = 'url'

Programmatically change the src of an img tag 的可能重复项

只是一种风格说明：一般建议只用大写字母开头的构造函数命名。

使用文件系统上的路径（“/Applications/MAMP/htdocs/shqc.jpg”）作为图像源是怎么回事？您不是在本地服务器上提供此服务吗？

不，另一个 img.src = 'url' 不起作用

【参考方案1】：

您可以在创建img 元素时为其设置id，（以防文档中有多个img 标签）

img.setAttribute('id', 'myImg');

然后，检查时间是否等于90，就像检查它是否在30 和40 之间一样，并如下更改它的src。

if(time == 90 )
    document.getElementById("myImg").src="/Applications/MAMP/htdocs/your_image.jpg";

如果你想删除 img 元素，因为它有一个父元素 (imageContext)，你可以这样做，

var el = document.getElementById('myImg');
el.parentNode.removeChild(el);

【讨论】：

太棒了！很高兴帮助:)

【参考方案2】：

您可以使用此代码：

document.getElementById("image").src="/PATH/To/Image/file.jpg";

【参考方案3】：

我想你只需要这个：

document.getElementById("myImg").src = //whatever

【参考方案4】：

您可以尝试创建图像位置数组。

var imageArray = new Array();

imageArray[0]= 
 image01: new Image(),
 image01.src: "my-image-01.png",
 imageCaption: "An image caption"
;

然后在下一个时间间隔只需将图像属性设置为数组中图片的src或只是附加整个图像。

if(time > 90 && time <= 100 && !added)
        div.appendChild(img);
        added = true;

        img.setAttribute("src",imageArray[0].src);

        img.style.width = '100%';
        img.style.height = 'auto';

希望对您有所帮助。 我从另一个堆栈溢出问题和答案中获得了一点帮助： Creating an array of image objects