Importing images in React

In this guide, we’ll learn how to import images in React. We’ll cover:

• Importing images from project folders
• Using images in components

Importing images from project folders

To import images from your project folders, use the import statement in JavaScript, just like we have done previously for modules and functions.

The app/assets folder

All our graphics will be stored in the app/assets folder. Take a moment to locate this now in the VS Code file explorer:

You will notice that there are three subfolders already inside app/assets, each of which represents a different image format:

• Directoryapp

  • Directoryassets

    • Directoryfavicons/

      • …
    • Directoryjpg/

      • …
    • Directorysvg/

      • …

This is where we will store all PNG images in the Epic News project, but, as you can see, there is no png folder at the moment.

Let’s create this now:

Creating a new folder

1. Click on the app/assets folder in the VS Code file explorer (or your own code editor) so that it becomes highlighted:

   

2. Next, right-click the same folder and select ‘New Folder…’ from the context menu:

   

   Call your new folder png. Your file tree should look like this:

   • Directoryapp

     • Directoryassets

       • Directoryfavicons/

         • …
       • Directoryjpg/

         • …
       • Directorypng/ < New folder

         • …
       • Directorysvg/

         • …

3. Drag and drop the image file from your computer into the new app/assets/png folder:

   

Importing the image

Now that the image is in the correct folder, you can import it into your component:

app/components/organisms/HeaderWithSearch.tsx

import { useMatches, Link } from 'react-router'
import { SearchBar } from '#app/components/search-bar.tsx'
import { Button } from '#app/components/ui/button.tsx'
import { UserDropdown } from '#app/components/user-dropdown.tsx'
import { useOptionalUser } from '#app/utils/user.ts'
import logo from '~/assets/png/epic-news-logo.png';

Caution

Names and locations are important!

The above snippet assumes you have saved your logo with the file name epic-news-logo.png, and placed this into the assets/png/ folder.

If you have saved your logo with a different filename, or placed it into a different location, you will need to modify the import statement accordingly.

Using the image

To actually show the image in the browser, you can use the img tag and set the src attribute to the imported image.

You should also set an alt attribute to describe the image for users accessing the site with a screen reader.

Add the line of code below inside the div that you created in the previous tutorial:

app/components/organisms/HeaderWithSearch.tsx

import { useMatches, Link } from 'react-router'
import { SearchBar } from '#app/components/search-bar.tsx'
import { Button } from '#app/components/ui/button.tsx'
import { UserDropdown } from '#app/components/user-dropdown.tsx'
import { useOptionalUser } from '#app/utils/user.ts'
import logo from '~/assets/png/epic-news-logo.png'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find((m) => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />
  const user = useOptionalUser()

  return (
    <header className="container py-6">
      <nav className="flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <div>
          <img src={logo} alt="Epic News Logo" className="w-16" />
          <span className="text-foreground text-sm">Epic News</span>
        </div>
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          {user ? (
            <UserDropdown />
          ) : (
            <Button asChild variant="default" size="lg">
              <Link to="/login">Log In</Link>
            </Button>
          )}
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

With this code saved, your logo should now appear just above the site title in the navigation bar:

Challenge

Use flexbox to position the logo and site title horizontally

Now that you have the logo and site title in the navigation bar, use flexbox to position them horizontally alongside each other:

• The logo should be on the left, and the site title should be on the right.
• There should be a small gap between the two to separate them.
• The site title should be centred vertically with the logo.

Hint

Flexbox

• You will need to use Tailwind’s flexbox utilities to achieve this.

• Use the flexbox generator below to help you visualise the layout of the logo and site title within their parent div.

Flexbox Generator

1

2

Parent

Apply flex?

Flex wrap?

Add gap?

Justify contentjustify-startjustify-endjustify-centerjustify-betweenjustify-aroundjustify-evenly

Align itemsitems-startitems-enditems-centeritems-baselineitems-stretch

Flex directionflex-rowflex-colflex-row-reverseflex-col-reverse

Children

Add Child

Remove Child

Using Tailwind?

Using React?

Tailwind CSS - Parent

Copy and paste the code below into your parent flex container to recreate the layout above 😎.

className="flex gap-4"

Once you have the layout you want, copy the generate code in your own component.

Compare your solution with the one below:

app/components/organisms/HeaderWithSearch.tsx

import { useMatches } from '@remix-run/react'
import { SearchBar } from '../molecules/SearchBar'
import LoginOrUserDropdown from './LoginOrUserDropdown'
import logo from '~/assets/png/epic-news-logo.png'

export default function HeaderWithSearch() {
  const matches = useMatches()
  const isOnSearchPage = matches.find(m => m.id === 'routes/users+/index')
  const searchBar = isOnSearchPage ? null : <SearchBar status="idle" />

  return (
    <header className="dark:bg-dark-primary/10 bg-primary/10 py-6">
      <nav className="container flex flex-wrap items-center justify-between gap-4 sm:flex-nowrap md:gap-8">
        <div className="flex items-center gap-4">
          <img src={logo} alt="Epic News Logo" className="w-16" />
          <span className="text-sm text-foreground">Epic News</span>
        </div>
        <div className="ml-auto hidden max-w-sm flex-1 sm:block">
          {searchBar}
        </div>
        <div className="flex items-center gap-10">
          <LoginOrUserDropdown />
        </div>
        <div className="block w-full sm:hidden">{searchBar}</div>
      </nav>
    </header>
  )
}

With this code in place, your site logo and title should now be positioned correctly in the navigation bar:

Flexbox solution

Summary

In this tutorial, we have:

• Moved an image to the app/assets/png folder
• Imported the image into a component
• Used the image as the src attribute in an img tag
• Positioned the image and text in the navigation bar correctly using flexbox

What’s next?

In the next tutorial, we’ll customise the navigation bar and footer by adding links to different pages in the site.