Image not loading on my chrome extension app

Question

My image is not loading properly on the website even though I do get a proper chrome extension url

src="chrome-extension://dbdl.../YouStudy.png"

(https://i.stack.imgur.com/GMFAS.png)

{
    "manifest_version": 3,
    "name": "test",
    "version": "1.0",
    "web_accesible_resources": ["/YouStudy2.png"],
    "content_scripts": [
        {
            "matches": ["*://www.youtube.com/*"],
            "css": ["style.css"],
            "js": ["content.js"]
        }
    ],
    "background": {
        "service_worker": "background.js"
    },
    "permissions": ["web_accessible_resources"]
}

function changeLogo() {
    const logo = document.createElement('img')
    logo.src = chrome.runtime.getURL('/YouStudy.png')
    const ytbLogo = document.getElementById('logo')
    console.log(logo)
    ytbLogo.appendChild(logo)
}