Javascript “没有上传图像”；SRC"；即使是支票也没有定义吗？

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

在我的主要成分“香水”中，我循环使用我的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;

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;

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

<Image url={SITE_URL + imageURL} />

从“React”导入React；
从“组件/图片/图片”导入图片；
const Image=props=>{
const{url}=props；
返回url.length>0？：；
};
导出默认图像；

无图像组件：

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;

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;

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

<Image url={SITE_URL + imageURL} />

从“React”导入React；
//没有照片
从“../../images/no photo.svg”导入NoPhotoImageURL；
log（NoPhotoImageURL）；
const NoPicture=（）=>(
);
导出默认无图片；

主要组成部分：

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;

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;

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

<Image url={SITE_URL + imageURL} />

从“React”导入React；
从“常量/导入”导入{SITE_URL}；
从“./Name”导入名称；
从“./类别”导入类别；
从“./Image”导入图像；
从“组件/库/库”导入库；
从“./Rating”导入评级；
从“/Description”导入说明；
从“/Notes”导入注释；
常量香水=道具=>{
常数{FragranceData}=props；
返回(
{FragranceData.map（香水=>{
控制台日志（香水）；
常数{
类别
描述
形象,，
画廊，
名称
评级
笔记，
发布：i已发布，
}=香味；
const imageURL=image.path；
返回是否已发布(
) : (
“还没有出版！”
);
})}
);
};
出口默认香水；

您的问题并不完全清楚您到底在经历什么，但这里是您代码中最明显的问题。您的

图像

组件中有这一行：

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;

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;

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

<Image url={SITE_URL + imageURL} />

根据您的评论，

SITE\u URL

是完整的URL，它永远不会为空，因此在

Image

组件中，

URL

将始终包含一些内容，无论主组件中的

imageURL

的值是多少。因此，

url.length

将始终大于0，并且每次都会呈现

img

标记

---

您需要将路径的各个部分分别传递到

图像

组件，或者将您的检查移动到主组件。

您能澄清您期望的内容与您看到的内容吗？我在IMG src标记中得到了未定义的URL。主组件中的

SITE\u URL

和

imageURL

是否确实包含字符串值？是，我明白了，你的

img

标签

localhost/images/undefined

中的url是什么，还是仅仅

undefined

？