Wasp•3w ago

static media not working

How can I add static media such as images or mp3 files ? They don't seem to load. I have a songs folder inside src but the code can not load it.

2 Replies

kapa.ai•3w ago

Hi @Xuban. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can help you with adding static media to your Wasp project. It seems you're encountering issues with loading files from a folder inside the src directory. Here's how you can properly handle static assets in Wasp: 1. For assets that you want to import and use in your code: Place these files directly in your src directory or a subdirectory within src. You can then import them in your JavaScript/TypeScript files. For example:

   import imgUrl from './img.png'
   
   function App() {
     return <img src={imgUrl} alt="img" />
   }

   import imgUrl from './img.png'
   
   function App() {
     return <img src={imgUrl} alt="img" />
   }

This method ensures that the asset file exists and is included in the bundle. The URL will be automatically handled by the build process. Docs: Importing an Asset as URL (https://wasp-lang.dev/docs/project/static-assets#importing-an-asset-as-url) 2. For assets that you don't need to reference in your source code or that need to retain their exact file names: Use the public directory at the root of your project. Assets placed here will be served at the root path / during development and copied to the dist directory as-is for production.

   .
   └── public
    ├── favicon.ico
    └── robots.txt

   .
   └── public
    ├── favicon.ico
    └── robots.txt

You should reference these assets using root absolute paths in your code, e.g., /icon.png. Docs: The public Directory (https://wasp-lang.dev/docs/project/static-assets#the-public-directory) If you're still experiencing issues after trying these methods, it's possible that there might be a configuration problem or a bug. In that case, you may want to check your project structure and ensure that you're following the correct file organization as described in the Project Structure documentation (https://wasp-lang.dev/docs/tutorial/project-structure). If the problem persists, you might want to share more details about your specific setup and the exact error you're encountering on the Wasp Discord channel (https://discord.com/channels/686873244791210014) for further assistance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Xuban, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

miho•2w ago

Have you figured this out @Xuban ? Placing static assets in public should be the way to go.

Gaming

Programming

static media not working

Did you find this page helpful?