Search code examples
reactjslaravelimagecomponentsreact-props

What issue is causing my images not to load?

I am trying to become a little more 'Dynamic', playing around with components and such. I am passing multiple values to 'AdminKachel', one of which is an image. I am trying to pass the path to the image in my project, but the images are not displayed. The server just gives me a 404 for the images I am passing. I have tried using relative as well as absolute paths. Where is my mistake?

Here is the AdminKachel component:

const AdminKacheln = ({ description, description1, link, img, className, alt }) => {
    if (className === 'box borderBottom') {
        return (
            <div className={className}>
                <div className="box-content">
                    <p className="pb-2">{description}</p>
                    <p>{description1}</p>
                    <p><a href={link}>Zur Übersicht</a></p>
                </div>
                <div className="imgContainer">
                    <img src={img} alt={alt}/>   // <------  Is this wrong?
                </div>
            </div>
        );
// more stuff

And here is where I am passing the values:

<AdminKacheln
                    description="Es haben X von X ionen ausstehende Unterweisungen"
                    link="Your Link"
                    className="box borderBottom"
                    img="IonLearning/resources/images/review.png"
                />

I tried changing the paths, removing and re-adding the images, and tried out different image types. Either I get a 'failed to fetch resource' error, or 'GET http://localhost:8000/images/ion2s.png 404 (Not Found)'. I am also trying to add a logo like this:

<section className="logo">
                <img src="../../images/ion2s.png"/>
            </section>

Also to no avail

Solution

  • The issue you're encountering is likely due to incorrect image paths. When specifying the src attribute for an image in a React component, it's important to provide the correct path to the image resource. Here are some steps to help you resolve the issue:

    1. Relative Paths: If you are using relative paths for your image resources, make sure the path is relative to the location of the component file where you are importing and using the image. In your case, it seems like the image path might be incorrect.

      • Ensure that the image file is located in the correct directory relative to the component file.
      • Verify that the path you provide to the img prop is relative to the component's location.

      For example, if your AdminKacheln component is in the same directory as the IonLearning directory, you might need to use a relative path like this:

      img="IonLearning/resources/images/review.png"

    2. Public Folder (Recommended): In a Create React App project (assuming you're using CRA), it's a common practice to store static assets like images in the public directory of your project. This allows you to use absolute paths to reference these assets.

      • Move your images directory to the public directory if it's not already there.

      Your image path should look like this:

      img="/images/review.png"

    3. Import Images: Another way to handle images in React is to import them directly at the top of your component file and use the imported variable as the image source. This can be especially useful for dynamically generated paths.

      Example:

      // Import the image at the top of your component file
import reviewImage from 'path-to-your-image.png';

// Use the imported image variable in your component
// ...
<img src={reviewImage} alt={alt} />
// ...

    Please double-check the path to your image files and ensure they are in the correct location relative to your component or in the public directory if you're using Create React App. Using imported variables for images can also make it easier to manage and reference your assets in a structured way.