我已经使用CollectionFS来显示图像和图像缩略图。我可以将图像缩略图存储在.meteor\local\cfs\files\thumbs
中,但是问题是我无法显示缩略图图像。如果我删除了原始图像存储功能new FS.Store.FileSystem("images")
,则缩略图显示正常。我需要的是原始图像和缩略图图像。现在,我的代码正在显示原始图像。如何显示缩略图和原始图像?
ProjectImages = new FS.Collection('ProjectImages', {
stores:[
new FS.Store.FileSystem("images"),
new FS.Store.FileSystem("thumbs", {
transformWrite: function(fileObj, readStream, writeStream) {
gm(readStream, fileObj.name()).resize(400,350,"^>").gravity("Center").extent(400,350).quality(100).stream().pipe(writeStream);
}
})
],
filter: {
allow: {
contentTypes: ['image/*'],
extensions: ['png', 'PNG', 'jpg', 'JPG', 'jpeg', 'JPEG']
}
}
});
在React.Component渲染中显示图像代码
export default class ListEvents extends React.Component{
constructor(props){
super(props);
this.state = {
events: []
};
}
componentDidMount(){
this.eventsTracker = Tracker.autorun(() => {
Meteor.subscribe('events');
const events = Events.find(
{status: false},
{ sort: { createdAt: -1 }}
).fetch();
this.setState({ events });
});
}
componentWillUnmount(){
this.eventsTracker.stop();
}
renderEvents(){
return this.state.events.length ? this.state.events.map((event, i) => (
<div key={event._id}>
<img src={event.projectImage} store='thumbs' alt="Brand" />
</div>
)) : OOOPSY: NO EVENTS REGISTERED
}
render(){
return(
<div className="row">
{this.renderEvents()}
</div>
);
}
}