Use public_folder to display images persisted with no path reference

src/components/EntryListing/EntryListing.js

@@ -10,6 +10,7 @@ import styles from './EntryListing.css';
 export default class EntryListing extends React.Component {
   static propTypes = {
     children: PropTypes.node.isRequired,
+    publicFolder: PropTypes.string.isRequired,
     collections: PropTypes.oneOfType([
       ImmutablePropTypes.map,
       ImmutablePropTypes.iterable,
@@ -23,7 +24,7 @@ export default class EntryListing extends React.Component {
     this.props.onPaginate(this.props.page + 1);
   };
 
-  inferFields(collection) {
+  inferFields(collection) { //eslint-disable-line
     const titleField = selectInferedField(collection, 'title');
     const descriptionField = selectInferedField(collection, 'description');
     const imageField = selectInferedField(collection, 'image');
@@ -33,11 +34,14 @@ export default class EntryListing extends React.Component {
     return { titleField, descriptionField, imageField, remainingFields };
   }
 
-  renderCard(collection, entry, inferedFields) {
+  renderCard(collection, entry, inferedFields, publicFolder) {
     const path = `/collections/${ collection.get('name') }/entries/${ entry.get('slug') }`;
     const label = entry.get('label');
     const title = label || entry.getIn(['data', inferedFields.titleField]);
-    const image = entry.getIn(['data', inferedFields.imageField]);
+    let image = entry.getIn(['data', inferedFields.imageField]);
+    if (image && image.indexOf('/') === -1) {
+      image = `/${ publicFolder }/${ image }`;
+    }
     return (
       <Card
         key={entry.get('slug')}
@@ -60,11 +64,11 @@ export default class EntryListing extends React.Component {
     );
   }
   renderCards = () => {
-    const { collections, entries } = this.props;
+    const { collections, entries, publicFolder } = this.props;
 
     if (Map.isMap(collections)) {
       const inferedFields = this.inferFields(collections);
-      return entries.map(entry => this.renderCard(collections, entry, inferedFields));
+      return entries.map(entry => this.renderCard(collections, entry, inferedFields, publicFolder));
     }
     return entries.map((entry) => {
       const collection = collections

src/containers/CollectionPage.js

@@ -12,6 +12,7 @@ class CollectionPage extends React.Component {
   static propTypes = {
     collection: ImmutablePropTypes.map.isRequired,
     collections: ImmutablePropTypes.orderedMap.isRequired,
+    publicFolder: PropTypes.string.isRequired,
     dispatch: PropTypes.func.isRequired,
     page: PropTypes.number,
     entries: ImmutablePropTypes.list,
@@ -37,7 +38,7 @@ class CollectionPage extends React.Component {
   };
 
   render() {
-    const { collections, collection, page, entries } = this.props;
+    const { collections, collection, publicFolder, page, entries } = this.props;
     if (collections == null) {
       return <h1>No collections defined in your config.yml</h1>;
     }
@@ -46,6 +47,7 @@ class CollectionPage extends React.Component {
         <EntryListing
           collections={collection}
           entries={entries}
+          publicFolder={publicFolder}
           page={page}
           onPaginate={this.handleLoadMore}
         >
@@ -60,14 +62,15 @@ class CollectionPage extends React.Component {
 
 
 function mapStateToProps(state, ownProps) {
-  const { collections } = state;
+  const { collections, config } = state;
   const { name, slug } = ownProps.params;
+  const publicFolder = config.get('public_folder');
   const collection = name ? collections.get(name) : collections.first();
   const page = state.entries.getIn(['pages', collection.get('name'), 'page']);
 
   const entries = selectEntries(state, collection.get('name'));
 
-  return { slug, collection, collections, page, entries };
+  return { slug, publicFolder, collection, collections, page, entries };
 }
 
 export default connect(mapStateToProps)(CollectionPage);

src/reducers/index.js

@@ -46,4 +46,4 @@ export const selectIntegration = (state, collection, hook) =>
   fromIntegrations.selectIntegration(state.integrations, collection, hook);
 
 export const getMedia = (state, path) =>
-  fromMedias.getMedia(state.medias, path);
+  fromMedias.getMedia(state.config.get('public_folder'), state.medias, path);

src/reducers/medias.js

@@ -16,10 +16,14 @@ const medias = (state = Map(), action) => {
 
 export default medias;
 
-export const getMedia = (state, path) => {
+export const getMedia = (publicFolder, state, path) => {
   if (state.has(path)) {
     return state.get(path);
-  } else {
-    return new MediaProxy(path, null, true);
   }
+
+  let localPath = path;
+  if (path && path.indexOf('/') === -1) {
+    localPath = `/${ publicFolder }/${ localPath }`;
+  }
+  return new MediaProxy(localPath, null, true);
 };