0
0
Astroframework~5 mins

Public directory for static assets in Astro - Cheat Sheet & Quick Revision

Choose your learning style9 modes available
Recall & Review
beginner
What is the purpose of the public directory in Astro projects?
The public directory holds static files like images, fonts, or icons that are served directly without processing. These files are accessible via the root URL in the browser.
Click to reveal answer
beginner
How do you reference a file named logo.png inside the public directory in your Astro component?
You reference it with a root-relative path like /logo.png. For example, <img src="/logo.png" alt="Logo" />.
Click to reveal answer
beginner
True or False: Files inside the public directory are processed by Astro's build pipeline.
False. Files in the public directory are served as-is without any build processing or bundling.
Click to reveal answer
intermediate
Why should you use the public directory for static assets instead of importing them in Astro components?
Using the public directory is simpler for assets that don't need processing or bundling. It keeps them separate and ensures they are served quickly and directly.
Click to reveal answer
intermediate
What happens if you place a file outside the public directory and try to access it via a URL in Astro?
Files outside the public directory are not served directly. They need to be imported or processed by Astro. Trying to access them via URL will result in a 404 error.
Click to reveal answer
Where should you put images that you want to serve directly in an Astro project?
AInside the <code>node_modules</code> directory
BInside the <code>src/components</code> directory
CInside the <code>src/pages</code> directory
DInside the <code>public</code> directory
How do you reference a static file named icon.svg inside the public directory in your HTML?
A<code>./icon.svg</code>
B<code>/icon.svg</code>
C<code>src/icon.svg</code>
D<code>public/icon.svg</code>
What happens to files inside the public directory during Astro's build process?
AThey are copied as-is to the output folder
BThey are converted to JavaScript modules
CThey are bundled and minified
DThey are ignored and not included
If you want to serve a font file directly, where should you place it in an Astro project?
AIn the <code>src/assets</code> folder
BIn the <code>src/components</code> folder
CIn the <code>public</code> directory
DIn the <code>node_modules</code> folder
True or False: You can import images from the public directory using JavaScript import statements in Astro.
AFalse
BOnly if you configure Astro
COnly for SVG files
DTrue
Explain how the public directory works in Astro and why it is important for static assets.
Think about how you want your images or fonts to be available in the browser.
You got /4 concepts.
    Describe how to reference a static asset from the public directory inside an Astro component.
    How do you write the URL in HTML to access a file in public?
    You got /4 concepts.