将图片名称作为URL参数传递后无法显示图片的问题
将图片名称作为URL参数传递后无法显示图片的问题
嘿,我瞅了你的代码,立马发现问题在哪儿啦!你现在是用innerHTML给img元素赋值,但img标签根本不是这么玩的——它是靠src属性来指定图片路径的,你用innerHTML只会把图片文件名当成纯文本塞到img标签里,这当然显示不出图片啦。
来,把你脚本里的最后一行代码改一下就行:
原来的错误代码:
document.getElementById("imagename").innerHTML = Parameter;
改成这个:
document.getElementById("imagename").src = Parameter;
另外给你提两个小建议,让代码更健壮:
- 确保你的图片文件(比如
mountains.jpg)和这个HTML页面在同一个目录下,如果不在的话,要把参数里的路径写对,比如images/mountains.jpg这种相对路径 - 可以加个参数判断,防止没传参数的时候页面出错,比如:
const queryString = window.location.search; const urlParameters = new URLSearchParams(queryString); const Parameter = urlParameters.get('parameter'); const imgElement = document.getElementById("imagename"); if (Parameter) { imgElement.src = Parameter; } else { imgElement.alt = "未获取到有效的图片参数"; }
这样调整之后,你再用test03.html?parameter=mountains.jpg访问页面,图片就能正常显示啦!
备注:内容来源于stack exchange,提问作者Aventurijn




