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.
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.
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.
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.
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.
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.