页面上的动态图像，其中 img src 根据 url 中的参数更改答案

【问题标题】：Dynamic image on page where img src changes based on parameter in url页面上的动态图像，其中 img src 根据 url 中的参数更改
【发布时间】：2022-07-01 22:41:29
【问题描述】：

我想知道是否可以根据 url 参数更改页面上的图像源？也许使用 Javascript？

例如，如果我们有带有 ID 的默认图像？

场景是，http://example.com/page-name/?image-id=specifiedimg

这会将图像加载为“specifiedimg”的源设置

【问题讨论】：

你在数据库中查询图片吗？
不只是一个链接（更改页面上 img 实体的来源）
请查看How to Ask 并选择tour，然后修改您的帖子以显示代码并询问具体内容。 “可能吗？”不适合 SO。
@isherwood - 我还没有编写代码。我在询问如何实现这一目标的示例。在下面得到了答案，您可以看到我将要测试和反馈的内容。无论如何，感谢您的有用评论。

标签： javascript html url

【解决方案1】：

您可以在url中指定图片路径，然后使用URLSearchParams获取图片路径，然后将图片设置为图片元素的来源。

例如：http://example.com/page-name.html?image-id=assets/img/something.png

const searchParams = new URLSearchParams(location.search),
  imagePath = searchParams.get('image-id'),
  image = new Image() // you can use querySelector to target an existing image tag
image.src = imagePath;

【讨论】：

请不要回答不努力的问题。它鼓励更多“为我写”的问题。