In my content script I am trying to insert an image that I want to use but it I keep getting this error: Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

I am not sure why I am getting this error when I do have my image in my manifest under web_accessible_resources

manifest.json

{
  "name": "Chrome Extension",
  "description": "Chrome Extension Test",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "permissions": ["storage", "activeTab", "scripting", "tabs"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/16x16.png",
      "32": "/images/32x32.png",
      "48": "/images/48x48.png",
      "128": "/images/128x128.png"
    }
  },
  "icons": {
    "16": "/images/16x16.png",
    "32": "/images/32x32.png",
    "48": "/images/48x48.png",
    "128": "/images/128x128.png"
  },
  "web_accessible_resources": [
    {
      "resources": ["contentscript.css", "images/neverGiveUp.png"],
      "matches": ["<all_urls>"]
    }
  ],
  "host_permissions": ["http://*/", "https://*/*"]
}

contentscript.js

const imageDiv = document.createElement("div");
imageDiv.id = "imageDiv";
const holdImg = document.createElement("img");
holdImg.id = "holdImg";
let imgPath = chrome.runtime.getURL("images/neverGiveUp.png")
holdImg.src = imgPath;
imageDiv.appendChild(holdImg);
document.body.appendChild(imageDiv);