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.