Question

我无法在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

Answer 1

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

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

如果您可以确认图像存储在文件系统中，则可以通过反应轻松地通过其ID获取图像。如果您知道imageId，就可以直接链接到组件中，则必须检查并确保图像已实际存储。

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

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

检查此repo here的反应方式。

CollectionFS已有一段时间没有维护

CollectionFS，带有ReactJS的显示图像

1 个答案: