如何解决我想问一个关于javascript image src的问题
<img src="../1.jpg" alt="" id="change-image">
<button id= "press-to-change">Press</button>
let count = 0;
let arr = ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]
document.getElementById("press-to-change").addEventListener("click",function(){
count++;
document.getElementById("change-image").src = "../" + arr[count]
所以我们有一个带有图像和按钮的HTML,而在JS中,我们有一个包含图像的数组,我们想在按下按钮时更改图像的src(这只是代码的一部分)
上面的代码工作正常,但我有一个问题为什么要这样做:
document.getElementById("change-image").src = "../" + arr[count]
代码可以正常工作,但是使用document.getElementById("change-image").src = `url('../${arrImage[count]}')`
代码则无法正常工作。
例如,另一个项目的下一个代码可以完美运行imageContainer.style.backgroundImage = `url('../${arrImage[count]}')`
解决方法
文本:url(image.jpg)
是仅在CSS中使用的语法。
这就是为什么它适用于backgroundImage
而不适用于src
始终需要src="path/to/image.jpg"
且url()
周围没有图片。
background-image
是元素style
的a,使用css格式。
src
用于图像元素的实际来源,并且仅需要有效路径
对于图像,您将src
元素的<img>
属性仅用于 。
如果要设置任意(但非<img>
)元素的背景图像,则需要使用其他语法:您必须分配给style.backgroundImage
属性,并且必须用url(...)
呈现的HTML标记如下:
<img src="foobar.png">
<div style="background-image: url('foobar.png');"></div>
它们不可互换。使用background-image
属性,您需要始终使用url(...)
。使用src
属性,您无需使用url(...)
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。