DEV Community

Sofia Jonsson
Sofia Jonsson

Posted on

Image Relative Path in React

#beginners #relativepath #css

Throughout my Bootcamp experience, I relied heavily upon bootstrap and Semantic UI to make my projects look and operate the way that I wanted them to.

When you're going 100 mph (cruising through the Bootcamp's curriculum) there's not much time to stop and really dive into the CSS and get into the nitty-gritty of your websites design structure. I've decided to challenge myself by using purely CSS in order to get a better understanding of how to manipulate the screen into displaying what I envision without the beautiful crutch of semantic or bootstrap.

There are so many tutorials on CSS out there, but I decided to write this in order to keep track of what I had a hard time with so that I can return to it if needed, or even better if I can help someone stay out of the deep dark hole of Q and A's that is Stack Overflow.

The first thing I came across that took me an absurd amount of time to figure out was creating a relative path to an image for my current react project. A relative path, for those that are unfamiliar with this topic, refers to pointing to a specific location in a file system relative to the current directory you're working on (i.e. dragging and image into one of your files on your project and referring to it there). This is more costly in terms of memory, so for the majority of my projects, I have used an absolute path for an external web image(A google Image).
Anyway, I was pulling my hair out at this as this is such an easy thing to do but the answer ended up being something I had never seen before. Instead of looking at the file structure:
Alt Text
and typing something like: <img src={require('../components/moab2.png')} className="home-img"/>

I came across the solution:
Alt Text

The reason I gathered from this was that when you're using Webpack (a module bundler), you need to require an image for the Webpack to properly process it(or them, if multiple). External images work fine due to this, but relative paths will need you to require them in order to work the way they would in a Ruby on Rails project.

Needless to say, I was stoked to have something so simple, but so vital to my project finally work the way I intended for it. I'm curious what other CSS hurdles and solutions will come up next, and they might make for another blog post!
CSS GIF
If you have any you'd like to share I'd love to hear about them in the comments!

Top comments (1)

Collapse
 
sirajrkhan profile image
Siraj Khan • • Edited

Thanks a lot Sofia for detailed blog. I also faced same thing when I started, and honestly it was quite frustrating.

At that time below solution bailed me out:

    import sea from './images/sea.jpg';
    import sunset from './images/sunset.jpg';

   <img src={sunset} alt="Sunset View on Beach" />
Enter fullscreen mode Exit fullscreen mode

Your solution is also great... the only suggestion I would make is.. if we can set a variable, where we define the folder path, it would help avoiding repetition. Example:

const IMG_PATH = './images/'
<img src={require(`${IMG_PATH}sea.jpg`)} alt="Sea and mountain" />
Enter fullscreen mode Exit fullscreen mode

or even better:

const IMG = (imgName) => {
  return require(`./images/${imgName}`)
}
<img src={IMG("sunset.jpg")} alt="Sunset View on Beach" />
Enter fullscreen mode Exit fullscreen mode

Read next

probir-sarkar profile image

Next.js Interview Mastery: Essential Questions 71-80 (Part 8)

Probir Sarkar -

msnmongare profile image

When and Why to Use JSON Columns in SQL Databases

Sospeter Mong'are -

chintanonweb profile image

10 TypeScript Secrets to Boost Your Development Expertise

chintanonweb -

keploy profile image

SOAP vs REST API: Understanding the Differences

keploy -