web-dev-qa-db-ja.com

画像のsrcタグでURLのBase64文字列を使用

画像のbase64バージョンを返すサービスがあります。ここで、srcのimgタグでbase64文字列を使用します。このサービスは、http://localhost:8080/file/301/base64の下でbase64バージョンを提供しています。

Base64文字列は次のようになります。

data:image/gif;base64,iVBORw0KGgo ...

ページのimgタグは現在次のようになっています。

<img alt="" src="http://localhost:8080/file/301/base64" style="height:836px; width:592px">

これを実行する方法はありますか？

htmlimagebase64
7
Thomas Schmidt

データURL文字列を備えたページを、別のタイプの外部リンク可能な画像アセットのように扱っているため、機能しません。残念ながら、外部アセットへのリンクは画像ファイルに対して機能しますが、データURLは外部リンクの代替として意図されているため、同じようには機能しません。

つまり、データURL文字列を使用して画像を表示するには、実際のデータURL文字列をsrc=値、あなたのケースでは例えば：

<img alt="" src="data:image/gif;base64,iVBORw0KGgo ...  " style="height:836px; width:592px">

例

Masinter、1998年のHTMLの例 RFC 2397-「データ」URLスキーム ：

<IMG SRC="data:image/gif;base64,R0lGODdhMAAwAPAAAAAAAP///ywAAAAAMAAw AAAC8IyPqcvt3wCcDkiLc7C0qwyGHhSWpjQu5yqmCYsapyuvUUlvONmOZtfzgFz ByTB10QgxOR0TqBQejhRNzOfkVJ+5YiUqrXF5Y5lKh/DeuNcP5yLWGsEbtLiOSp a/TPg7JpJHxyendzWTBfX0cxOnKPjgBzi4diinWGdkF8kjdfnycQZXZeYGejmJl ZeGl9i2icVqaNVailT6F5iJ90m6mvuTS4OK05M0vDk0Q4XUtwvKOzrcd3iq9uis F81M1OIcR7lEewwcLp7tuNNkM3uNna3F2JQFo97Vriy/Xl4/f1cf5VWzXyym7PH hhx4dbgYKAAA7" ALT="Larry">
10
clarity123

データURI はURIスキームであり、画像ファイル形式ではありません。 src="http://..."を使用する場合、スキームはhttpではなくdataであり、ブラウザはレスポンスが画像であることを期待しています。つまり、レスポンスの本文は画像のバイトである必要があります。 base64バージョンではありません。

1. base64の代わりにサーバーから画像のバイトを返すだけ2. ajaxを使用してサーバーからbase64バージョンをロードし、それを使用して画像のsrc属性を設定します。

3
wong2