importing Image not working from content script about browser-extension-template HOT 3 CLOSED

Glad you solved it, thanks for reporting back. It'd be great to have this piece of information on Parcel’s docs, which are somewhat lacking: https://parceljs.org/recipes/web-extension/

I added some extra links to the documentation b311e54

from browser-extension-template.

A few pointers:

• You have to use getURL in the content script or else the URLs will be relative to the current website rather than the extension. This also explains why it works without it on an extension page
• it appears that getURL is "not supported" by parcel: parcel-bundler/parcel#5758 (comment)
• the getURL example with the hashed filename works because it's ignored by Parcel and you're providing the final URL to it, so it's natively supported by the browser

Have you tried this?

import logo from "./blah blah/logo.png"

<img src={browser.runtime.getURL(logo)}/>

The logo variable will be set by Parcel to "/logo.abcd56.png" and that's a valid string to pass to getURL, you just need to make sure it points to the right element in the distribution folder (e.g. if it's inside images/, then also include that: getURL("images/" + logo)

from browser-extension-template.

that did the trick! 🚀

// manifest.json
"web_accessible_resources": ["on-install/index.html", "images/*"]

// OnBoarding.jsx
import logoSrc from "../../images/logo.png"
const logo = browser.runtime.getURL(logoSrc)

maybe add this to the documentation?

(want me to PR that?)

THanks again, you ROCK!

from browser-extension-template.