URL引用图片的动态变化

Question

我正在使用 Elementor 在 Wordpress 上设计一个网页，目前该页面的正文中有一个图像。

该图像使用“从 URL 插入”选项，而不是从媒体库中提取。我希望页面上有这样的功能，用户可以单击按钮，通过将 php 字符串传递到 URL 来切换显示的图像，这在理想情况下会更改图片的 URL。

目标是减少 Web 服务器本身的压力。图片 URL 结构是一致的，如下所示：

www.example.com/graphics/someregion_somevariable.png

是否可以利用 CSS 代码（在 Elementor 图片小部件内部）直接更改传递到网站 URL 的 php 字符串中引用图片的 URL？需要利用哪些 CSS 和 PHP 代码来执行此操作？谢谢你！

Answer 1

JavaScript 解决方案

使用 URL 参数指示要显示的图片：

• https://example.com/page?picture=picture_1
• https://example.com/page?picture=picture_2 code>
• https://example.com/page?picture=picture_3

您可以根据此 URL 参数有条件地加载特定图像：

const urlParams = new URLSearchParams(window.location.search);
const pictureParam = urlParams.get('picture')

const pictureUrl = switch (pictureParam) {
  case 'picture_1':
    return 'www.example.com/graphics/picture_1.png'
    break

  case 'picture_2':
    return 'www.example.com/graphics/another-picture.png'
    break

  case 'picture_3':
    return 'www.example.com/graphics/picture_x.png'
    break

  default:
    return 'www.example.com/graphics/fallback.png'
    break
}

现在您可以在页面上选择图像元素并将 src 更改为所需图片。

document.querySelector('#the-image-element').src = pictureUrl