Vue.js UI not displaying Amazon S3 image that was successfully requested

Question

I'm trying to fetch my objects which are all images in Amazon S3 and display it on my web app. My put and get requests for my images were successful according to my network tab on Google developers console. Also the image exists in my bucket

The problem I'm having is why isn't it displaying anything

Here's my code some snippet of my code, there's no error by the way and the uploaded variable is true, all it does is check if the put request was made successful

    <div class="container">
      <p v-if="uploaded" class="is-size-3">The image you just uploaded</p>
      <img class="img" v-if="uploaded" :src="showImage()" />

      <!-- <img
        class="img"
        src="https://homepages.cae.wisc.edu/~ece533/images/baboon.png"
      /> -->
    </div>
  </div>
</template>

<script>
import AWS from "aws-sdk";
import Vue from "vue";
import { Toast } from "buefy";
import "buefy/dist/buefy.css";
Vue.use(Toast);

let bucketName = process.env.VUE_APP_BUCKET_NAME;
let bucketRegion = process.env.VUE_APP_BUCKET_REGION;
let IdentityPoolId = process.env.VUE_APP_IDENTITY_POOL_ID;

AWS.config.update({
  region: bucketRegion,
  credentials: new AWS.CognitoIdentityCredentials({
    IdentityPoolId: IdentityPoolId,
  }),
});
var s3 = new AWS.S3({
  apiVersion: "2006-03-01",
  params: { Bucket: bucketName },
});
export default {
  name: "Search",
  data() {
    return {
      uploaded: false,
      fileNameGlobal: "",
    };
  },
  methods: {
    showImage: function() {
      var params = {
        Bucket: bucketName,
        Key: `${bucketName}/` + this.fileNameGlobal,
      };
      s3.getObject(params, function(err, data) {
        if (err) console.log(err, err.stack);
        // an error occurred
        else {
          let imageData = data.Body;
          let str = imageData.reduce(function(a, b) {
            return a + String.fromCharCode(b);
          }, "");
          let srcUrl =
            "data:image/jpeg;base64, " +
            btoa(str).replace(/.{76}(?=.)/g, "$&\n");
          console.log(srcUrl);
          return srcUrl;
        } // successful response
      });
    },

`showImage` has no return value so you can't use it to set the `src` of your image. You'll need to have the `s3.getObject()` callback set a data property which you can refer to in your template — Phil, Jan 19 '21 at 03:49
No it doesn't. You can't return the value from an asynchronous call like that. See [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Phil, Jan 19 '21 at 03:55
@AKM, you're confusing the return value of `showImage` with the return value of `s3.getObject()`. To fix this, as Phil said, place a `url` in `data` and assign `srcUrl` to it once the response has arrived. At which point you'll be able to use `url` in your template. — tao, Jan 19 '21 at 04:17

Vue.js UI not displaying Amazon S3 image that was successfully requested

0 Answers0