[!] Error: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)

[rxrxrxrx]

• Rollup Plugin Name: @rollup/plugin-url
• Rollup Plugin Version:"^7.0.0"
• Rollup Version:"^8.1.0",
• Operating System (or Browser): OSX / chrome
• Node Version: v16.14.2
• Link to reproduction (⚠️ read below):

I used this repo for my app : (so its to make a chrome extension)
https://github.com/rossmoody/ts-extension-starter?ref=reactjsexample.com

I added just one line on App.tsx

import logo from '../img/intro.png';
then
<img src={logo} alt="image"/>;

Expected Behavior

Having just a picture showing on my app

Actual Behavior

(!) Plugin typescript: @rollup/plugin-typescript TS2307: Cannot find module '../img/intro.png' or its corresponding type declarations.
src/pages/popup/App.tsx: (2:18)

2 import logo from '../img/intro.png';
~~~~~~~~~~~~~~~~~~

[!] Error: Unexpected character '�' (Note that you need plugins to import files that are not JavaScript)
src/pages/img/intro.png (1:0)

Additional Information

I read rollup doc, I checked stackoverflow, Im just lost I have no Idea why its not working I used to import picture / component like this, I didnt find anything and im sure its pretty simple, I will be glad is someone would just guid me