[解決済み] HTMLでBase64画像を表示する方法
2022-03-17 04:15:45
質問
Base64の画像をインラインで表示するのに苦労しています。
どうしたらいいのでしょうか？
<!DOCTYPE html>
<html>
<head>
<title>Display Image</title>
</head>
<body>
<img style='display:block; width:100px;height:100px;' id='base64image'
src='data:image/jpeg;base64, LzlqLzRBQ... <!-- Base64 data -->' />
</body>
</html>
解決方法は？
私が疑っているのは、もちろん実際のBase64データです。それ以外は問題なさそうです。参照 このフィドル 同じようなスキームが動作しているところ。文字セットを指定してみるとよいでしょう。
<div>
<p>Taken from wikpedia</p>
<img src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
</div>
を試すことができます。 このBase64デコーダは で、Base64データが正しいかどうかを確認することができます。
関連
-
[解決済み] 要素を水平方向にセンタリングする方法
-
[解決済み] リンクのように動作するHTMLボタンを作成する方法
-
[解決済み] HTML 5: Is it <br>, <br/>, or <br />?
-
[解決済み] HTMLのid属性に有効な値は何ですか？
-
[解決済み] AndroidのListViewで画像を遅延ロードする方法
-
[解決済み] base64文字列をエンコード、デコードするにはどうしたらいいですか？
-
[解決済み] Base64画像の埋め込み
-
[解決済み】なぜHTMLは "chucknorris "を色と見なすのか？
-
[解決済み】jQueryでチェックボックスがチェックされているかどうかを確認するにはどうすればよいですか？
-
[解決済み】Node.jsでBase64エンコードを行うにはどうすればよいですか？
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[解決済み] 横型リストアイテム
-
[解決済み] <html xmlns="http://www.w3.org/1999/xhtml">」は何をするものですか？
-
[解決済み] divの内容を下に揃える方法
-
[解決済み] mailto:を使ってメールの件名や内容を設定することはできますか？
-
[解決済み] input type="file "ボタンのスタイリング
-
[解決済み] input type="date "のフォーマットを変更する方法はありますか？
-
[解決済み] hr要素の色を変更する
-
[解決済み] 特定のクラスや属性を持たない要素を選択するCSSセレクタは書けますか？
-
[解決済み] 静的な HTML ページにファビコンを追加する
-
[解決済み] HTMLのdiv要素とspan要素の違いは何ですか？