This page is a work in progress.You can help improve it. →

Missing Document Title

theme: Next, 1

Working with Assets

We've seen that we can import TypeScript code into the current file/module.

We've also seen that we can import JSON data from a file into a variable.


  • We can load many types of data using the idea of a loader
  • A loader is JavaScript code that our development tools can use to process a file and make data available to a module


Here are just a few things we can use with import and loaders:

  • TypeScript code
  • JSON
  • Images
  • Fonts
  • CSS

Importing images in a React application

Your first inclination to deal with images in JSX will be to write code like the following:

<img src="./images/my-awesome-image.png" alt="Awesomeness Defined" />

Doesn't work!

The correct method is to import the image first:

import image from './images/my-awesome-image.png'

This provides you a string containing the path to the image to use in code.

function AwesomeImage() {
return <img src={image} alt="Awesomeness Defined' />
© 2017 - 2021; Built with ♥ in St. Petersburg, Florida.