You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

将图片名称作为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

火山引擎 最新活动