javascript - 没有上传图片 "SRC"即使检查也未定义？

Question

我在这里面临一个奇怪的问题，我创建了一个检查图像是否上传的方法。但由于某种原因，我的“其他”不起作用。

在我的主要组件“Fragrances”中，我正在循环访问我的 API。并检查图像数组是否为空返回，否则显示图像。

我做错了什么？

我的代码:

图像组件:

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 组件:

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;

主要成分:

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

您的问题并不完全清楚您到底遇到了什么，但这是代码中最明显的问题。您的 Image 组件中有这一行:

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

但是，在您的主组件中，您将一个串联字符串传递给 Image 组件:

<Image url={SITE_URL + imageURL} />

根据您的评论，SITE_URL 是完整的 URL，它永远不会为空，因此在您的 Image 组件中，url 将始终包含某些内容，无论主组件中 imageURL 的值是什么。因此，url.length 将始终大于 0，并且 img 标记每次都会呈现。

您需要将路径的各个部分单独传递到 Image 组件，或者将检查移到主组件中。