VueJs скачать картинку из весенней загрузки и отобразить в <img>

Question

Я разработал бэкэнд с пружинной загрузкой с Vue Frontend. Я хочу загрузить картинку и сохранить ее в gcloud. Загрузка в порядке. Но когда я хочу загрузить его и отобразить в виде, у меня возникают проблемы. Иногда полученное изображение обрезается. У меня только половина его, вроде бы не все байты отправлены. (Картинка хорошо сохраняется в gcloud, я могу видеть ее полностью, когда go в консоли gcloud).

Как я получаю картинку в моем приложении Spring Boot:

    @GetMapping(value = "/api/comp/picture")
    @ResponseBody
    public ResponseEntity<byte[]> downloadCompanyAvatarImage(@RequestParam Long id) throws IOException {
        Optional<Comp> comp = compService.findById(id);
        if (comp.isPresent()) {
            if (comp.get().getPictureGeneration() == null
                    && comp.get().getPictureName() == null) {
                return ResponseEntity.status(HttpStatus.NOT_FOUND).build();
            } else {
                BlobId blobId = BlobId
                        .of("xx", comp.getPictureName(),comp.getPictureGeneration());
                Blob image = storage.getString(blobId);

                byte[] encodedBytes = Base64.getEncoder().encode(image.getContent());

                return ResponseEntity.ok()
                        .contentLength(image.getSize())
                        .contentType(MediaType.parseMediaType(image.getContentType()))
                        .body(encodedBytes);
            }
        } else {
            throw new EntityNotFoundException("Comp Not found");
        }

И Как я получаю его в моем VueJs приложении:

В магазине:

  getCompPicture(params) {
    return axios.get(`/api/comp/picture?id=${params}`, { headers: auth.authHeader() }).then(response => {
      return response.data;
    });
  },

На моей Vue странице:

 computed: {
    getPictureUrl() {
      return `data:image/png;base64,${this.picture}`;
    },
  },

method: {
    this.getCompPicture(this.id).then(pic => {
        this.picture = pic;
        this.pictureLoaded = true;
      });
},

В html:

      <img :src="getPictureUrl"  alt="logo" v-if="!edit && picture && pictureLoaded">

У вас есть представление о том, что не так?

У меня есть другое решение, которое состоит в том, чтобы вернуть ресурс в Spring следующим образом:

      InputStream is = new ByteArrayInputStream(image.getContent());
      return ResponseEntity.ok()
          .contentLength(image.getSize())
          .contentType(MediaType.parseMediaType(image.getContentType()))
          .body(new InputStreamResource(is));

Если Я делаю это, я вижу изображение в предварительном просмотре консоли разработки, но я понятия не имею, как отобразить его в бизе, потому что данные похожи на

�PNG
IHDR(��/�gsRGB���gAM
�2�M�m4���p3(�v( 

Answer 1

Предлагаю вам заменить produces на MediaType.IMAGE_JPEG_VALUE

Пример:

 @GetMapping(path = "/image", produces = MediaType.IMAGE_JPEG_VALUE)
    public @ResponseBody byte[] getImage() throws IOException {
        InputStream in = getClass().getResourceAsStream("image.jpg");
        return IOUtils.toByteArray(in);
    }