Changing src image with Firefox extension

I'm creating my first browser extension - and this is for Firefox (testing in Firefox Dev v120), ive included an image in 'images' directory of the extension, i have "web_accessible_resources" in my manifest, but the image wont load. At the moment im using manifest v2, i also tried with manifest v3 - taking note of what Mozilla say here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources

But using manifest v2 no image will display. If i use manifest v3 & include "matches" the extension throws an error.

My manifest.json (v2)

{
    "manifest_version": 2,
    "name": "Newscorp",
    "version": "1.0",
  
    "description": "An attempt to replace the logo's of Newscorp news sites with more correct logos",
  
    "icons": {
      "48": "icons/border-48.png"
    },
  
    "content_scripts": [
      {
        "matches": ["*://*.heraldsun.com.au/*"],
        "js": ["newscorp.js"]
      }
    ],

    "web_accessible_resources": [
        "images/Herald-Scum.png"
      ]   
  }

if i try v3 manifest then web resources has this:

"web_accessible_resources": [
    {
      "resources": ["Herald-Scum.png"],
      "matches": ["/images/*"]
    }
]

and here's my JS

document.body.style.border = "2px solid red";
var head= document.getElementsByClassName("header_link_image")[0];
head.src = "images/Herald-Scum.png";

In debugging in the browser (with v2 manifest) - i can see its replaced the image src

but it appears the extension is trying to load the image from the website URL & not from the extension, so its getting a 404 for the image (as obviously it doesn't exist on the website)

I found the answer to my problem.

the image needs to point to the URL of the extension - via using browser.runtime.getURL

so my JS code is:

document.body.style.border = "5px solid red";
var head= document.getElementsByClassName("header_link_image")[0];
head.src = browser.runtime.getURL('/images/Herald-Scum.png');