How can I change xlink:href for all <image> tags?-CodePudding

Let's assume I cannot modify an HTML source code, however I do know, that all image tags look like:

<image id="shadows" xlink:href="https://...pic.png"></image>
<image id="lights" xlink:href="https://...pic.png"></image>
<image id="views" xlink:href="https://...pic.png"></image>
...

I don't like the image - "https://...pic.png", I wish to use instead locally installed image - "./beautiful.png"

How can I replace xlink:href attiribute for ALL image tags (I can still modify js/css)?

CodePudding user response：

You can use getElementById to find each element by their id and replace their xlink:href attribute with Javascript: https://jsfiddle.net/8cz46vt2/

For example:

document.getElementById("shadows").setAttribute("xlink:href", "./beautiful.png");

will yield:

<image id="shadows" xlink:href="./beautiful.png"></image>

CodePudding user response：

Could you try something like this?

function updateImageTag() {
  // Get all image tags
  const imageTags = document.querySelectorAll("image");

  // Loop through all image tags
  imageTags.forEach((imageTag) => {
    // Get the xlink:href attribute of the image tag
    const xlinkHref = imageTag.getAttribute("xlink:href");

    // If the xlink:href attribute is "https://...pic.png"
    if (xlinkHref === "https://...pic.png") {
      // Update the xlink:href attribute to be "./beautiful.png"
      imageTag.setAttribute("xlink:href", "./beautiful.png");
    }
  });
}

CodePudding user response：

function changePic() {
    let elements = document.getElementsByTagName('image')
    for (let i in elements) { 
        elements[i].setAttribute("xlink:href", "./beautiful.png")
    }
}

Then call the changePic() function wherever you want to :)