React component not rendering images on screen

You must select a tag to post in this category. Please find the tag relating to the section of the course you are on
Im trying to use tailwind css to style my react component Ive provided the url of all the images . The images are on my computer I saved the images in an array the slides array but when i try to display the images from within the array inside the div the images are not showing up on the screen. I have checked the developer tools but it doesn’t show any errors I dont know what im doing wrong. heres my code.

import { useState } from "react"; const About = ()=> { const slides = [ { url:"C:/Users/devon/Downloads/college images/background.jpg" }, { url:"C:/Users/devon/Downloads/college images/college library.jpg" }, { url:"C:/Users/devon/Downloads/college images/college classroom.jpg" }, ]; return( <> <div className='max-w-[1400px] h-[780px] w-full m-auto py-16 px-4 relative'> <div style={{backgroundImage:`url(${slides[0].url})`}}className='w-full h-full rounded-2xl bg-center bg-cover duration 500'> </div> </div> </> );

Try renaming the files and folders without spaces (and change the code correspondingly) - let us know if it works!

the files and folders i don’t understand what you mean.

On your computer, rename the folder /college images/ to /college-images/

Rename college library.jpg to college-library.jpg (and the third image as well).

Then change your code in the slides object to correspond with the renamed folders and files.

Edit: I’m testing it myself with local images, and whitespace may not be the issue.

ok yeah i tried it and it didn’t work . is actually not letting me render anything on the component screen at all i tried adding a h2 with the word hello and that doesn’t even show up.

Ah, I see. So I don’t think local images outside of your project folder will work in React - you need to add them to your project folder.

Put the images in your project’s /src/ folder (or /src/images/ if you wish) then import them like so:

import backgroundImage from './src/images/background.jpg';

Then

const slides = [
    {
        url: backgroundImage;
    };
    ...
}
1 Like

now it says module not found

i Tried linking the image 3 different times im not sure why it cant be found.

That probably has to do with the path to the image. If you’re able to upload to Github, it would be easier to debug :slight_smile:

1 Like

ok I will upload it.

heres the link to my repository GitHub - devonz1/React-User-Form: User Form build with React

Change the image import in About.js to the following:

import backgroundImage from '../images/background.jpg';
1 Like

wow it worked thank you so much . so its not in the src folder how did you figure it out.

1 Like

Ah, yeah. You can look up “relative paths” to learn more.

Essentially ./ is looking in the same folder.

…/ will look in the parent folder (one folder up)

…/folder will look in a folder within the current file’s parent folder.

It’s always relative to the current file you are in.

im confused it goes back one folder i don’t get what your saying.

does it depend on how many periods you add before the file name. Im just wondering for next time because ive been trying to figure this out for like 2 hours i tried a bunch of different things and nothing worked.

Whoops - I replaced my response above with the response to your question.

It’s about “relative file paths”

ok ok thanks relative paths ill look it up just in case come across this issue again . Thanks for taking out the time to help me Today James I really appreciate You .

1 Like

Oh okay got it relative file paths . Thank You.

1 Like

When a React component fails to render images on the screen, investigate potential issues. First, confirm that the image paths are correct and accessible. Ensure proper import statements or paths in the component. Check for typos and case sensitivity. Verify the image formats are supported, and the file extensions match. If using dynamic data, inspect if the image URLs are correctly assigned. Additionally, check for any error messages in the console that might provide insights. By methodically examining these factors, you can troubleshoot and resolve issues preventing image rendering in your React component.

To know more, click herehttps://purecode.ai/blogs/tailwind-components/