CollectionFS, Display Image w/ ReactJS

Question

I'm having trouble displaying an Image in my CollectionFS collection. The console tells me that the resource is unavailable and the error is a 503 error.

I am on meteor version 1.6.1.1

I have no clue as to why the images cannot be accessed. I've looked at various posts on here, but none have involved Meteor & ReactJS.

Any help would be deeply appreciated.

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>
    )
}

}

My packages are the following:

cfs:standard-packages
cfs:gridfs
cfs:filesystem

Answer 1

Error 503 means the service is unavailable and the server is overloaded .
you might want to check few things in your application

1. check your publication methods.
2. Subscribe to the data in that component to make sure you are able to get the data, you can use Meteor toys for that.

if you can confirm that your images are stored in the filesystem, with react you can easily get images by their id. with this if you know the imageId, then you can directly link in you component, you will have to check and make sure the image is actually stored.

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

media in this case will be the name of the collection you are keeping the image's reference.
file is the image object that contains all metadata and anything else about the image.

check this repo here on how I did in react.

CollectionFS has not been maintained for a while