mysql 데이터베이스에 BLOB로 저장된 일부 이미지가 있습니다. html로 표시하고 싶습니다. 다음과 같이 서버에서 응답을받습니다.angularjs로 html로 blob 이미지를 표시
{"data":[{"ClassImage":{"type":"Buffer","data":[91,111,98,106,101,99,116,32,70,105,108,101,93]}}],"status":200,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://192.168.1.19:80/getImage","headers":{"Accept":"application/json, text/plain, */*"}},"statusText":"OK"}
내가하는 일을 실제로 알지 못합니다. AFTER 검색 결과 BLOB 응답을 base64로 변환 한 다음 이미지의 임시 URL을 만들어 이미지에 src
을 설정해야한다는 것을 알았습니다.
응답 유형을 blob
으로 설정하면 응답의 데이터 부분이 비어 있습니다 ({}
). 응답 유형을 설정하지 않으면 [91,111,98,106,101,99,116,32,70,105,108,101,93]
으로 표시됩니다.
$scope.getImage = function(){
$http({
method:'GET',
url: $scope.ipForHttp+"getImage"
// responseType:'arrayBuffer'
})
.then(function(response){
var u8 = new Uint8Array(response.data[0].ClassImage.data);
var b64encoded = btoa(String.fromCharCode.apply(null, u8));
var file = new Blob(u8, {type: 'image/png'});
$scope.fileURL = URL.createObjectURL(file);
$scope.content = $sce.trustAsResourceUrl($scope.fileURL);
console.log($scope.fileURL);
console.log(JSON.stringify(response));
})
}
HTML :
이
코드입니다 <div>
Image:
<!-- <img ng-src="{{content}}"> -->
<!-- <img data-ng-src="data:image/png;base64,{{b64encoded}}"> -->
<img ng-src="{{fileURL}}">
<p>{{fileURL}}</p>
</div>
나는 createObjectURL
후 얻는 fileURL
은 blob:http://192.168.1.19/6d5ab92f-7e86-4537-893c-f22826ed1b5a
나는이 작업을 수행 할 때 나는 이미지를 얻을하지 않습니다 . URL로 이동하면 페이지가 비어 있습니다. 내가 도대체 뭘 잘못하고있는 겁니까?
데이터베이스의 모양으로 이미지를 저장 나쁜 생각입니다. 이미지를 base64로 인코딩 된 데이터로 저장하는 것은 끔찍한 일입니다. http://stackoverflow.com/a/38829952/267540 – e4c5
@ e4c5. 네. 이게 사용자 데이터 야. 내 상사가 데이터베이스에 BLOB가되기를 원해. 그것을 표시하도록 도와 주실 수 있습니까? – Abhi
미안하지만, 나쁜 습관에 기여하는 것을 거부합니다. – e4c5