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组件，要么将支票上移到主要组件中。

即使检查，也没有定义上传的图像“ SRC”？

1 个答案: