CollectionFS，使用 ReactJS 显示图像答案

【问题标题】：CollectionFS, Display Image w/ ReactJSCollectionFS，使用 ReactJS 显示图像
【发布时间】：2018-12-31 11:25:13
【问题描述】：

我无法在我的 CollectionFS 集合中显示图像。控制台告诉我资源不可用，错误是 503 错误。

我正在使用流星版本 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

【问题讨论】：

标签： reactjs meteor collectionfs

【解决方案1】：

错误 503 表示服务不可用，服务器过载。
您可能需要检查应用程序中的一些内容

检查您的发布方法。
订阅该组件中的数据以确保您能够获取数据，您可以使用Meteor toys for that。

如果您可以确认您的图像存储在文件系统中，则通过 react 您可以轻松地通过它们的 id 获取图像。有了这个，如果你知道 imageId，那么你可以直接在你的组件中链接，你必须检查并确保图像实际存储。

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

media 在这种情况下将是您保存图像引用的集合的名称。
file 是包含所有元数据和有关图像的任何其他内容的图像对象。

查看repo here，了解我的反应。

CollectionFS 有一段时间没维护了

【讨论】：