Public directory for static assets in Astro - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Astro serve files from the public directory?

In Astro, you place static files like images or fonts in the public directory. What happens when you reference /logo.png in your component?

A Astro bundles the file inside JavaScript and serves it only when imported in components.

B Astro copies the file to the build output and serves it at the root URL, so <code>/logo.png</code> works directly.

C Astro ignores files in <code>public</code> and you must import them manually to use.

D Astro requires you to configure a special plugin to serve files from <code>public</code>.

💡 Hint

Think about how static assets are usually served in web projects.

Astro treats the public directory as a place for static assets. These files are copied as-is to the build output and served at the root URL path. So referencing /logo.png works without importing.

📝 Syntax

intermediate

Correct way to reference a static asset in Astro component

You have an image banner.jpg inside the public folder. Which is the correct way to display it in an Astro component?

A <img src="/banner.jpg" alt="Banner" />

B <img src="./public/banner.jpg" alt="Banner" />

C <img src="../public/banner.jpg" alt="Banner" />

D <img src="banner.jpg" alt="Banner" />

💡 Hint

Remember how URLs relate to the public folder in Astro.

Files in the public folder are served from the root URL. So you reference them with a path starting with /. Relative paths including public folder name won't work.

🔧 Debug

advanced

Why does this static asset not load in Astro?

You placed icon.svg inside src/assets and referenced it as /icon.svg in your component. Why does it fail to load?

A Astro requires a special config to serve SVG files from <code>src/assets</code>.

B You must import <code>icon.svg</code> as a module to use it in Astro components.

C The file path is correct; the problem is a missing alt attribute.

D Files in <code>src/assets</code> are not served as static assets; only <code>public</code> folder files are served at root.

💡 Hint

Think about which folders Astro treats as static asset sources.

Astro only serves files from the public directory as static assets accessible by URL. Files inside src/assets are part of source code and need to be imported or handled differently.

🧠 Conceptual

advanced

What happens to files in the public directory during Astro build?

During the build process, how does Astro handle files inside the public directory?

A Astro copies all files from <code>public</code> directly to the build output folder without modification.

B Astro optimizes and bundles all files from <code>public</code> into JavaScript chunks.

C Astro ignores the <code>public</code> folder during build and serves files only in development.

D Astro converts all images in <code>public</code> to base64 strings embedded in HTML.

💡 Hint

Think about static files and how they should be served in production.

Astro treats the public folder as a place for static files. It copies them as-is to the build output so they can be served directly by the web server.

❓ state_output

expert

How does referencing a public asset affect component reactivity in Astro?

You have an Astro component that displays an image from the public folder. If you change the image file in public and rebuild, what happens to the component's rendered output?

A The component caches the old image and never updates unless you change the component code.

B Astro automatically reloads the component state to reflect the new image without rebuilding.

C The component shows the updated image immediately after rebuild because the public asset URL stays the same but the file content changes.

D The component breaks because Astro cannot detect changes in public assets.

💡 Hint

Think about how static files and rebuilds affect what the browser loads.

Since the image URL remains the same, the browser loads the updated file after rebuild. Astro does not track public files as reactive state, but rebuilding updates the served files.

Practice

1. What is the main purpose of the public directory in an Astro project?

easy

A. To store static files that are served directly without processing

B. To write server-side code for API routes

C. To keep component files for UI rendering

D. To store configuration files for the project

Solution

1. Step 1: Understand the role of the public directory

   The public directory is designed to hold static assets like images, fonts, and icons that do not need processing.

2. Step 2: Differentiate from other directories

   Unlike source or config folders, public files are served as-is with root-relative URLs.

3. Final Answer:

   To store static files that are served directly without processing -> Option A

4. Quick Check:

   Public directory = static files served as-is [OK]

Hint: Public folder holds files served directly at root URL [OK]

Common Mistakes:

• Confusing public with source code folders
• Thinking public is for server code
• Assuming public files are processed or compiled

2. Which of the following is the correct way to reference an image named logo.png stored in the public directory inside an Astro component?

easy

A. <img src="./logo.png" alt="Logo" />

B. <img src="/logo.png" alt="Logo" />

C. <img src="public/logo.png" alt="Logo" />

D. <img src="../logo.png" alt="Logo" />

Solution

1. Step 1: Understand URL referencing for public assets

   Files in the public directory are accessed with root-relative URLs starting with a slash (/).

2. Step 2: Apply correct path for image source

   Using /logo.png correctly points to the file in the public folder.

3. Final Answer:

   <img src="/logo.png" alt="Logo" /> -> Option B

4. Quick Check:

   Public assets use root-relative paths starting with / [OK]

Hint: Use root-relative path starting with / for public files [OK]

Common Mistakes:

• Using relative paths like ./ or ../ for public assets
• Including 'public/' in the URL path
• Forgetting the leading slash in the path

3. Given a file icon.svg inside the public/icons folder, what will be the URL to access it in the browser?

medium

A. /src/icons/icon.svg

B. /public/icons/icon.svg

C. ./icons/icon.svg

D. /icons/icon.svg

Solution

1. Step 1: Identify the public folder URL mapping

   Files inside the public folder are served at the root URL, so the folder name after public is part of the URL.

2. Step 2: Construct the URL path

   The file inside public/icons is accessed as /icons/icon.svg.

3. Final Answer:

   /icons/icon.svg -> Option D

4. Quick Check:

   Public folder maps to root URL, so path = /icons/icon.svg [OK]

Hint: Public subfolders appear directly after root slash in URL [OK]

Common Mistakes:

• Including 'public' in the URL path
• Using relative paths like ./icons/icon.svg
• Referencing source folders instead of public

4. You placed a font file custom-font.woff2 inside the public/fonts folder but your CSS @font-face rule is not loading it. Which of the following is the most likely cause?

medium

A. The font file should be inside the src folder, not public

B. Astro does not support font files in the public directory

C. The CSS URL is missing the leading slash, e.g., url('fonts/custom-font.woff2')

D. The font file must be imported in the component script

Solution

1. Step 1: Check CSS URL path for public assets

   URLs for files in public must start with a slash to be root-relative.

2. Step 2: Identify the missing slash issue

   Using url('fonts/custom-font.woff2') is relative and incorrect; it should be url('/fonts/custom-font.woff2').

3. Final Answer:

   The CSS URL is missing the leading slash, e.g., url('fonts/custom-font.woff2') -> Option C

4. Quick Check:

   Public assets need root-relative URLs starting with / [OK]

Hint: Always start public asset URLs with / in CSS [OK]

Common Mistakes:

• Omitting the leading slash in CSS URLs
• Moving static assets to wrong folders
• Expecting Astro to process font files automatically

5. You want to add a downloadable PDF named guide.pdf to your Astro site. You placed it inside the public/docs folder. How should you create a link in your component so users can download it when clicked?

hard

A. <a href="/docs/guide.pdf" download>Download Guide</a>

B. <a href="docs/guide.pdf" download>Download Guide</a>

C. <a href="/public/docs/guide.pdf" download>Download Guide</a>

D. <a href="./docs/guide.pdf" download>Download Guide</a>

Solution

1. Step 1: Understand public folder URL mapping

   Files inside public are served at root URL, so the path must start with a slash and exclude 'public'.

2. Step 2: Use correct href with download attribute

   The link should use /docs/guide.pdf as href and include the download attribute for direct download.

3. Final Answer:

   <a href="/docs/guide.pdf" download>Download Guide</a> -> Option A

4. Quick Check:

   Public files use root-relative URLs with leading / and download attribute triggers download [OK]

Hint: Use root-relative URL with download attribute for static files [OK]

Common Mistakes:

• Omitting the leading slash in href
• Including 'public' in the URL path
• Using relative paths like ./docs/guide.pdf