Unable to find images based on url in React

I’m new to frameworks so I apologize in advance. I am trying to access images stored in a directory that is next to the components parent. so

  • src

    • components

      • component1

      • component2

    • img

        *img1
      
      • img2

I am trying to access images in the img directory from component 2. If my understanding is correct the proper path would be ‘…/img/img1.jpg’. i’ve also tried ‘…img/img1.jpg’. I’ve also tried hosting the files from an outside source like google drive or google photos, following best practices to get direct links to those images.

I’m wondering if this a problem with webpack? Here is the code for the component that is trying to access the photo.

import React, { Component, useState, useEffect } from 'react';
import { render } from 'react-dom'
import { useTransition, animated, config } from "react-spring";
import imgArr from './images';
import '../App.css';

const Slideshow = () => {
  const [index, set] = useState(0)
  const transitions = useTransition(imgArr[index], item => item.id, {
    from: { opacity: 0 },
    enter: {opacity: 1 },
    leave: { opacity: 0 },
    config: config.molasses,
  })
  useEffect(() => void setInterval(() => set(state => (state + 1) % 4), 2000), [])
  return transitions.map(({ item, props, key }) => (
    <animated.div
      key={key}
      className="bg"
      style={{ ...props, slideshowContainerStyle}}
    >
      <img className="img" src={require(item.url)} alt=""/>
    </animated.div>
  ))
}

const slideshowContainerStyle = {
 width: '80%',
 height: '300px'
}


export default Slideshow;

the error i’m getting is Error: Cannot find module ‘…/img/img1.jpg’

webpackEmptyContext

src/components sync:2

Can you provide more context by sharking a specific code that’s related to your problem?

Make sure it’s formatted in the editor.

What @shimphillip said, but I are you building JavaScript to some output folder? So something (like webpack in create-react-app) is taking those JS files and making a single output file? Because if that’s the case, and you’re trying to reference images with a relative path like /myImage.jpg, then it’s nothing to do with frameworks, there just isn’t an image at that path because your folder will be something like

public
  index.html
  bundle.js
  style.css

If there is a public folder, you put the images there

I am using create react app but i’m not building out to an output folder right now. i’m just in the process of building the project using a localhost live server.

If your using CRA you’re definitely building to an output folder, that’s how it works, you run it and it builds your JS files into a single file. Are you following the instructions for how to include images?

I understand what you mean now. I have built two React apps like to do lists and such but i realized neither of them have contained images. I’m just trying to do it similar to how you would in vanilla JS. Can i find something specific to this on reacts doc site? I’m looking through it now. I guess i’ve been going about looking for the answer in the wrong way

With create-react-app, you should just be able to drop your images in the public/ directory and they will be be accessible from the root. No need to use the file-loader or require() the image.

1 Like

There is a public folder, you can put them there, that’s the root of your (built) project, it’s what the server is serving, and you can see index.html is in there.

Otherwise

Ah, snap

2 Likes

Thanks i’ll get back to you

Thank you! I will get back to you but i was just not thinking about it in the right way in relation to how it builds. Wow lol

I will still try using the public folder, but i want to make sure my understanding of all of the concepts is right. it looks like in the documentation they recommend using import instead of putting things in the public folder. I was trying to use import to get the images from a local folder on my computer. when react builds everything and imports the photos, does a server still not have access to files on my HDD? i’ve tried hosting these images on other platforms like google drive and dropbox and importing them based on the url that way.

importing an image is more useful for when you have the image co-located with the component, such as images that “belong to” a particular react component and aren’t used anywhere else. For images you just want available with a URI like /img/foo.png, it’s often easier to just use the URL instead.

One advantage of using import on files is that it’s checked at build time, so if you make a typo in the asset name, your project will fail to build, rather than giving users a broken image at runtime. It does couple your project to webpack, but if you’re using CRA, that’s already the case.

can i import images from google drive or dropbox when the app builds and make them available in the component?

No, the file-loader is only available for local files.

thank you for your time. if i’m trying to use import image from './images where ./image is a javascript file with an array of img urls

const imgArr = [
{id: 0, url: ‘…/img/img1.jpg’},
{id: 1, url: ‘…/img/img2.jpg’},
{id: 2, url: ‘…img/img3.jpg’},
{id: 3, url: ‘…img/img4.jpg’}
]

what do i need to do to implement file-loader. isn’t it built into webpack? i updated original post with react code where it brings in the url for the images. there is something i’m still not understanding about how import works i guess.

i updated the original post with some react code. i’m attempting to import images stored in a local directory into a React component. ./images is a js file with an array of img urls to a local directory. I’m trying to access images that are stored within the react app with import instead of putting imgs into the public folder.

If you want to import something, you first have to export it.

export const images = [...]

import { images } from "..."

This is a named import.
Then you can iterate over the array.

file-loader is not built in to webpack (nor is any other loader), and it does require configuration to use. create-react-app comes with it preconfigured, so you can import images or any file and it’ll work out of the box.

1 Like

Up and running now. Thanks for your help and patience! :slight_smile:

hey, try this out

https://stackoverflow.com/a/60074918/4620807