从图像源中删除最后一个字符

Posted 2023-05-09

【中文标题】从图像源中删除最后一个字符

【英文标题】：Remove the last characters from image source

【发布时间】：2015-09-27 13:57:08

【问题描述】：

我正在构建一个包含大量图片的 Wordpress 网站。 通过加载 wordpress 生成的图像的“大”版本，我想我可以最小化页面加载而不是获取它们的完整大小。但在台式机上，我希望加载全尺寸图像而不是“大”尺寸的图像。

如果页面加载在桌面上，我已使用以下代码更改图像源：

$('img').each(function() 
    var src = $(this).attr('src');
    $(this).attr('src', src.replace(/-1024x682(\.[^.]+)?$/, '$1'));
);

但由于所有图片的“大”分辨率都不是 1024x682，我需要另一种解决方案来解决我的问题。是否可以不替换图像 src 中的-1024x682，而只需删除最后 9 个字符（当然是在文件扩展名之前）？

【问题讨论】：

举个例子src和更新的src

'large' src = wordpress.axelboberg.se/wp-content/uploads/2015/07/… 和完整的 src = wordpress.axelboberg.se/wp-content/uploads/2015/07/2.jpg

无论您如何通过 javascript 进行修改，这都不可靠 - 考虑一个已经称为“a-1024x682.jpg”并且在您上传时具有这些尺寸的文件（wordpress 不会创建“大”缩略图，而是使用原始缩略图，当您进行切换时，您最终会得到一个不存在的文件）...您应该使用 wordpress 函数在 php 中获取替代图像源，所以向我们展示实际插入图像的代码，我们将能够提供可靠的解决方案。

【参考方案1】：

您可以将代码更新为如下所示

var src = $(this).attr('src');
var extension = src.substring(src.lastIndexOf(".")); // gets the extension
var imageName = src.substring(0, src.lastIndexOf(".")); // gets the file name
imageName = imageName.replace(imageName.substring(imageName.length-9), ""); // replace the last 9 characters with empty string
$(this).attr('src', imageName + extension); 

【讨论】：

不可靠 - 如果包含前导短划线的图像尺寸字符串的长度不完全是 9 个字符，它将不起作用。

OP 要求删除 9 个字符。

我只会在作为附件上传的图片上使用代码，所有这些图片都有很大的归属感，在 src 末尾添加了九个字符。跨度>

那是真的......其他人会来 SO 寻找解决方案，因此提供一个在很多情况下不会中断的解决方案会更有帮助，即使 OP 没有发布他的问题时没有意识到这个问题。

【参考方案2】：

如果您更喜欢正则表达式：

$(this).attr('src', src.replace(/-[0-9x]+(?=\.jpg)$/, ''));

这将允许任何数字/大小的分辨率。