CollectionFS，使用ReactJS显示图像

Question

在我的CollectionFS收藏集中显示图像时遇到问题。控制台告诉我资源不可用，错误是503错误。

我使用的是meteor版本1.6.1.1

我不知道为什么这些图片不能被访问。我看过这里的各种帖子，但都没有涉及到Meteor & ReactJS。

任何帮助都将深表感谢。

xport default class Home extends Component {
constructor(props){
    super()
    this.profileImage = this.getProfileImage()[0]
    window.profileImage = this.profileImage
}

getProfileImage(){
    return Images.find().fetch()
}

render(){
    console.log(this.profileImage.url({store:"images",uploading: "./user.jpg"}))
    return(
        <div>
            <div className="row">
                <div className="flex-container">
                    <div className="flex-child">
                        <img src={FlowRouter.subsReady('images') ? this.profileImage.url({store:"images",uploading: "./user.jpg",auth: false}) :  "./user.jpg" } className="img-responsive" id="home-profilepic" alt=""/>
                    </div>
                    <div className="flex-child">
                        <h4 className="bold" id="home-firstandlast">
                            {FlowRouter.subsReady('userData') ? Meteor.user().profile.firstAndLastName : 'Loading'}
                        </h4>
                        <p id="home-username" className="bold">
                            {FlowRouter.subsReady('userData') ? Meteor.user().username : 'Loading'}
                        </p>
                        <p id="home-bio">
                            {FlowRouter.subsReady('userData') ? String(Meteor.user().profile.bio) : 'Loading'}
                        </p>
                    </div>
                </div>
            </div>

            <br/>

            <div className="border"></div>

            <br/>

            <div className="row">
                <div className="flex-container center-text">
                    <div>
                        <p className="bold">Followers</p>
                        <p>
                            {FlowRouter.subsReady('userData') ? String(Meteor.user().profile.contacts.followers.length) : 'Loading'}
                        </p>
                    </div>
                    <div>
                        <p className="bold">Following</p>
                        <p>
                            {FlowRouter.subsReady('userData') ? String(Meteor.user().profile.contacts.following.length) : 'Loading'}
                        </p>
                    </div>
                    <div>
                        <p className="bold">Podcasts</p>
                        <p>20</p>
                    </div>
                </div>
            </div>
        </div>
    )
}

}

我的包如下：

cfs:standard-packages
cfs:gridfs
cfs:filesystem

Answer 1

错误503表示服务不可用，服务器过载。

您可能希望检查应用程序中的几项内容

要确保能够获取数据，可以使用Meteor toys for that.

1. 检查您的发布对该组件中数据的访问

如果您可以确认您的图像存储在文件系统中，使用react，您可以轻松地根据其id获取图像。有了这个，如果你知道imageId，那么你就可以直接链接到你的组件中，你必须检查并确保图像确实被存储了。

<img src={`/uploads/media-${file._id}-${file.original.name}`} alt='' />

在本例中，media将是您保留图像引用的集合的名称。

file是一个图像对象，它包含关于图像的所有元数据和任何其他内容。

检查这个repo here，了解我在react中的表现。

CollectionFS已经有一段时间没有维护了