No image uploaded "SRC" is undefined even with a check?

Question

I'm facing a weird problem here I've created a check whether an image is uploaded or not. But for some reason, my "else" is not working.

Inside my main component "Fragrances" I'm looping through my API. And checking if the Array of images is empty return else show the image.

What am I doing wrong?

My code:

image component:

import React from 'react';

import NoPicture from 'components/NoPicture/NoPicture';

const Image = props => {
    const { url } = props;

    return url.length > 0 ? <img src={url} className="image" /> : <NoPicture />;
};

export default Image;

NoPicture component:

import React from 'react';

// No Picture
import NoPhotoImageURL from '../../images/no-photo.svg';

console.log(NoPhotoImageURL);

const NoPicture = () => (
    <img
        src={NoPhotoImageURL}
        alt="No Photo"
        className="image image--default"
    />
);

export default NoPicture;

Main component:

import React from 'react';

import { SITE_URL } from 'constants/import';

import Name from './name';
import Category from './category';
import Image from './image';
import Gallery from 'components/Gallery/gallery';
import Rating from './rating';
import Description from './description';
import Notes from './notes';

const Fragrances = props => {
    const { FragranceData } = props;

    return (
        <section className="fragrances">
            <div className="row">
                {FragranceData.map(fragrance => {
                    console.log(fragrance);
                    const {
                        category,
                        description,
                        image,
                        gallery,
                        name,
                        rating,
                        notes,
                        Publish: isPublished,
                    } = fragrance;
                    const imageURL = image.path;

                    return isPublished ? (
                        <div key={fragrance._id} className="col-xs-12 col-sm-6">
                            <div className="fragrance">
                                <Name name={name} />
                                <Category category={category} />
                                <Image url={SITE_URL + imageURL} />
                                <Rating rating={rating} />
                                <Description description={description} />
                                <Notes notes={notes} />
                                <Gallery imageData={gallery} />
                            </div>
                        </div>
                    ) : (
                        'Nothing published yet!'
                    );
                })}
            </div>
        </section>
    );
};
export default Fragrances;

Answer 1

Your question is not entirely clear on what exactly you are experiencing, but here is the most obvious problem in your code. You have this line in your Image component:

return url.length > 0 ? <img src={url} className="image" /> : <NoPicture />;

However, in your main component you are passing a concatenated string to the Image component:

<Image url={SITE_URL + imageURL} />

According to your comment, SITE_URL is the full URL, which will never be empty, so inside your Image component, url will always contain something, no matter what the value of imageURL is in the main component. Thus, url.length will always be greater than 0, and the img tag will render every time.

You will either need to pass the individual parts of the path down to the Image component separately, or move your check up into the main component.