以编程方式修改 <img> URL 以添加 "?example-text=50" 和前缀 "<some text>"

Question

这里的初学者后端开发人员。

我基本上是在尝试在我的网站论坛上实现这些说明，这样我的图像对于缩略图来说就不会那么大，从而大大减慢速度：https://www.script-tutorials.com/how-to-resize-images-on-server-side/

我在第二部分。

基本上我有一些这样的代码：

<a class="IndexImage" href="/forum/discussion/55/design-flaw-001-give-up"><img src="/forum/uploads/editor/dm/idnutwgmgaik.jpg" class="IndexImage"></a>

但是我需要将图像 src 更改为

<img src="<?php loadImage('/forum/uploads/editor/dm/idnutwgmgaik.jpg', 50, 50) ?>"

我不确定这在Javascript中是否可行，或者是否可能？我要实现的逻辑基本上是iff。索引图像 img --->然后，前缀 ~~<?php loadImage('~~ 到 img 源并附加 ~~', 50, 50) ?>~~

这可能真的很容易，也可能是不可能的。任何反馈不胜感激。谢谢。我希望这个问题非常清楚。

我找到了这个页面，解释了如何将 src 更改为预设的东西，https://stackoverflow.com/questions/11722400/programmatically-change-the-src-of-an-img-tag#=，但我正在尝试动态修改代码。

Answer 1

如果你想用javascript更改源代码，你可以使用jquery和$.attr().attr('src','NEW SOURCE GOES HERE')https://jsfiddle.net/uv58rkb6/

为什么要输入 php 函数作为图像的source？

<img src="<?php loadImage('/forum/uploads/editor/dm/idnutwgmgaik.jpg', 50, 50) ?>"

loadImage()是一个 php 函数(基于参数)从输入(包括高度/宽度)构建 html 元素，但您无法在src属性中编辑高度或宽度。你最终会得到无效的html，如下所示：

<img src="<img src="idnutwgmgaik.jpg" width="50" height="50">">

此外，在页面加载后，您不能调用loadImage()php 函数。PHP 在页面加载时运行一次。如果你想使用 PHP 动态更改后端的图像，请使用 jquery 的 AJAX。

$.ajax({
type: "POST",
url: "loadimage.php",
success: function(data) {
//return the output of loadimage.php in the data callback
$("#imageID").attr("src", data);
}
});