Image is not being displayed when reading from DB

Question

I'm mapping over documents and trying to read image using img tag. I have set the src which is reading the file, but the image is not displaying.

Is there a way that I can read the image and display using the img tag? My code is below:

DB:

{
  "_id": "DpEJ8hDvFrLzbqdoA",
  "createdByTransform": false,
  "original": {
    "name": "download.jpg",
    "updatedAt": ISODate("2018-12-20T09:48:40.361Z"),
    "size": 6813,
    "type": "image/jpeg"
  },
  "data": {
    "blob": {

    },
    "_type": "image/jpeg"
  },
  "owner": "hF9xmgcHhnqzbdXhD",
  "collectionName": "uploads",
  "_eventEmitter": {
    "onListeners": {

    },
    "onceListeners": {

    },
    "maxListeners": 10
  }
}

function to return image, using img tag:

function ImageData(props) {
  return (
    <div>
      <img className="image-data" src={props.image.original.name} />;
      <p>{props.image.original.size}</p>
      <p>{props.image.original.type}</p>
    </div>
  );
}

Mapping over the documents:

{this.props.images.map(image => {
   return <ImageData key={image._id} image={image} />;
})}

Subscribing to the document:

export default withTracker(() => {
  Meteor.subscribe("photos");

  return {
    images: Photos.find({})
      .fetch()
      .map(image => {
        return {
          ...image
        };
      })
  };
})(Image);

I'm image is not being displayed.

have you tried using "require"? Something like: src={require('./path/to/image')}? — DouglasCamargo, Jan 18 '19 at 16:21
then you should pass the blob data to src and not the file name — DouglasCamargo, Jan 18 '19 at 16:50
see this: https://stackoverflow.com/questions/8499633/how-to-display-base64-images-in-html — DouglasCamargo, Jan 18 '19 at 16:59

Image is not being displayed when reading from DB

0 Answers0