Public directory for static assets in Astro - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to reference a static image from the public directory in Astro.

Astro

<img src="/[1]" alt="Logo">

Drag options to blanks, or click blank then click option'

Aassets/logo.png

Bsrc/logo.png

Cpublic/logo.png

Dlogo.png

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'src/' or 'public/' in the image path.

Using relative paths like './logo.png' instead of root-based paths.

Files in the public directory are served from the root URL. So you reference them directly by their filename.

2fill in blank

medium

Complete the code to link a CSS file stored in the public directory in Astro.

Astro

<link rel="stylesheet" href="/[1]">

Drag options to blanks, or click blank then click option'

Apublic/styles/main.css

Bsrc/styles/main.css

Cstyles/main.css

Dassets/styles/main.css

Attempts:

3 left

💡 Hint

Common Mistakes

Adding 'public/' prefix in the href attribute.

Using relative paths that don't start from root.

CSS files in the public folder are served from the root URL, so you use the path relative to public.

3fill in blank

hard

Fix the error in the code to correctly reference a PDF file from the public directory in Astro.

Astro

<a href="/[1]" download>Download PDF</a>

Drag options to blanks, or click blank then click option'

Adocs/manual.pdf

Bsrc/docs/manual.pdf

Cpublic/docs/manual.pdf

Dassets/docs/manual.pdf

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'public/' or 'src/' in the href path.

Using relative paths that don't start with a slash.

Files inside the public directory are served from the root URL, so the path should be relative to public without 'public/' prefix.

4fill in blank

hard

Fill both blanks to create an image tag referencing a file in the public directory with alt text.

Astro

<img src="/[1]" alt="[2]">

Drag options to blanks, or click blank then click option'

Aimages/photo.jpg

Bsrc/images/photo.jpg

CUser photo

DPhoto from user

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'src/' prefix in the image path.

Leaving alt attribute empty or irrelevant.

The src attribute should point to the file path relative to the public folder, and the alt attribute should describe the image for accessibility.

5fill in blank

hard

Fill all three blanks to create a link to a JavaScript file in the public directory with type and defer attributes.

Astro

<script src="/[1]" type="[2]" [3]></script>

Drag options to blanks, or click blank then click option'

Ascripts/app.js

Btext/javascript

Cdefer

Dsrc/scripts/app.js

Attempts:

3 left

💡 Hint

Common Mistakes

Including 'src/' or 'public/' in the src path.

Omitting the defer attribute or using it incorrectly.

The src attribute points to the JS file relative to public. The type attribute specifies the script type, and defer makes the script load after HTML parsing.

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