Inserting an image in a table using HTML for a Chrome Extension on Manifest Version 3

Question

My manifest is updated to allow all images in the web_accessible_resources

    {
    "name": "MH",
    "description": "Building an Extension!",
    "version": "2.0",
    "manifest_version": 3,
    "background": {
      "service_worker": "js/background.js"
    },
    "web_accessible_resources": [
      {
        "resources": ["*.html",
          "*.js",
          "*.css",
          "*.PNG",
          "*.png"],
        "matches": [ "<all_urls>" ]
      }
    ],
    "permissions": ["identity",
      "identity.email",
      "activeTab", 
      "scripting",
      "tabs"],
    "host_permissions": ["http://*/*", "https://*/*"],
    "content_scripts": [
      {
        "matches": ["*://*.google.com/*"],
        "js": ["js/xpaths.js"]
      }
    ]
  }

I then used the following code in my content script

        var act = `
        <table className = "usefullness">
          <tr>
            <th></th>
            <td style="text-align: right;font-size: 14px"><img src="happy.PNG"></img></td>
            ` + Usebar + `
          </tr>
        </table>
        <table className = "emotion">
          <tr>
            <th></th>
              ` + Emobar + `
          </tr>
        </table>
        <table className = "knowledge">
          <tr>
            <th></th>
              ` + Knowbar + `
          </tr>
        </table>`

        var Action = document.createElement("div");
        Action.innerHTML = act;
        finalDivs[i].appendChild(Action);

But the image does not show up. I even put the image files in the exact directory as the manifest file but it still does not load. Is there a size or permission requirement I am missing? Any help is very appreciated!