Как показать изображение с сервера в JavaScript?

Question

Я создаю страницы просмотра миниатюр.

Я сохранил внешнюю папку миниатюр изображений (C: / temp / image) и получаю их с сервера в виде байтовых данных.

Теперь я хочупреобразовать эти данные в изображение в javascript и показать в HTML.

, поэтому я попытался создать URL-адрес блоба, используя эти байтовые данныеНо я получил ошибку "ФАЙЛ НЕ НАЙДЕН"

Вот мой код.Пожалуйста, дайте мне знать, что мне не хватает

(Это Spring boot и angular.js)

Сервис

public List<Map<String, Object>> listRecentWithInfo( int userid) throws IOException, SerialException, SQLException {
    List<Map<String, Object>> recentList = dashboardDao.listRecentWithInfo( userid);

    for (Map<String, Object> map : recentList) {
        int dashboardid = (int) map.get( "DASHBOARDID");
        FileInputStream is = null;
        BufferedImage bi = null;
        ByteArrayOutputStream bao= null;
        byte[] imageByte = null;
        ResponseEntity<byte[]> res = null;
        HttpHeaders headers = new HttpHeaders();
        headers.setCacheControl(CacheControl.noCache().getHeaderValue());

        if (thumbnailDao.findOne( dashboardid) != null) {
            String path = thumbnailPath + thumbnailDao.getOne( dashboardid).getFileName();

            is = new FileInputStream(path);
            bi = ImageIO.read(is);
            System.out.println(bi.getType());
            bao = new ByteArrayOutputStream();
            ImageIO.write(bi, "png", bao);
            imageByte = bao.toByteArray();
            res = new ResponseEntity<>(imageByte, headers, HttpStatus.OK);
        }
        map.put("THUMBNAIL", res);
    }
    return recentList;
}

js

$http.get("app/dashboard/recentWithInfo").then( function( rtn) {
    rtn.data.map(item=> {
        if (item.THUMBNAIL) {

            var bytes = new Uint8Array(item.THUMBNAIL.body / 2);
            for (var i = 0; i < item.THUMBNAIL.body; i += 2) {
                bytes[i / 2] = parseInt(item.THUMBNAIL.body.substring(i, i + 2), /* base = */ 16);
            }

            // Make a Blob from the bytes
            var blob = new Blob([bytes], {type: 'image/png'});
            var imageUrl =  URL.createObjectURL(blob);
            URL.revokeObjectURL(imageUrl);
            item.THUMBNAIL = imageUrl;
        }
    });

    $scope.items = rtn.data;
        console.log(rtn.data);
    });
});

Заранее спасибо!

Answer 1

Я получил решение сам

Я понял, что могу конвертировать байтовые данные в Base64 таким же образом

 "data:image/png;base64," + item.THUMBNAIL.body;

, и эти закодированные в BASE64 данные могут бытьиспользуется как источник изображения в HTML!