Insert image in react project

Glitch Help
1

Hi, how i can insert images folder on my react project in Glitch.
I would like to add a lot of pictures in my project.

1 Like
2

Try this:

import React from 'react';
import logo from './logo.png'; // Tell webpack this JS file uses this image

function Header() {
  // Import result is the URL of your image
  return <img src={logo} alt="Logo" />;
}

export default Header;

I got the code from here: Adding Images, Fonts, and Files | Create React App

3

Although of course you don’t need to bundle them in at all, just use a normal img (jsx) tag and point its src attribute to your image’s asset location:

import React from 'react';
const imgURL = "asset URL from the Glitch asset folder";

function Header() {
  return <img src={imgURL} alt="Logo" />;
}

export default Header;

Anything you don’t need to bundle is less work for the bundler, and keeps things easier to work with for the browser =)

4

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.