为什么我无法在tampermonkey中更改此图片？

Question

因此，这真令人沮丧……在mymaths网站https://www.mymaths.co.uk/上，计算机上有一个小学生的图像，图像地址为https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg。 我已经尝试了很多东西，但似乎无法取代它。

说我想用一个汉堡图片替换它，地址为：https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100。

到目前为止，我已经尝试了很多线程，但是该图像似乎与其他网站上的图像不同，这就是为什么我的代码无法对其进行处理的原因：

var images3 = document.getElementsByTagName ("img");
var i3=0;
while(i3<images3.length)
{
if(images[i3].src == "https://www.mymaths.co.uk/assets/images/big/primary-school-photo-2.jpg")
{
images[i3].src = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100";
}
i3=i3+1;
}

有人可以帮我吗？谢谢。

Answer 1

嗯，这对我来说也是新的。显然，the <picture> tag不仅是包装器，而且是<img>的更智能版本。

它允许根据屏幕尺寸和类型为图像标签选择不同的URL。例如，尝试在开发人员工具中执行此操作：

我将srcset替换为具有<source>的{​​{1}}，这意味着它在浏览器窗口小于(max-width: 767px)时处于活动状态。现在，如果您调整浏览器窗口的大小以使其更小，则有时原始图像将与汉堡图像一起放置。

因此，您要做的是替换所有767px的srcset。这对我有用：

<source>

您可以通过检查// Limit the list of omages on those that are under `<picture>` tag const images = document.querySelectorAll("picture img, picture source"); // RegExp to check if we want to replace the URL const replaceChecker = /primary-school-photo-2\.jpg$/i; // The replacement URL const replaceWith = "https://images.ctfassets.net/sd2voc54sjgs/5L6livQvCw28S04IUSAcm6/6482ea1819e86be1b4f7e85bfbbfe9a6/Blog_Header_Hamburger_History_Option.png?fm=jpg&q=80&fl=progressive&w=1100"; for(const image of images) { // Pick the name of the attribute we want to change based on whether it's <img> or <source> const srcAttributeName = image.tagName.toLowerCase() == "img" ? "src" : "srcset"; const oldURL = image[srcAttributeName] + ""; if(replaceChecker.test(oldURL)) { image[srcAttributeName] = replaceWith; } } 属性来改进该属性，如果该属性显示的是最小屏幕宽度，请为较小的汉堡包图像使用URL。这是由汉堡包图片网址中的media GET参数设置的。