2017-09-30 5 views
0

をインライン化しないとは、通常のように、インライン形でただし、HTML内の画像を埋め込む(「初心者-単純」)方法はありません:HTMLに埋め込まイメージが、画像データが

<img src="data:image/png;base64,iVBORw0KGgoAAAA [...]" /> 

しかしでbase64コードがhtmlファイルの最後に置かれる形式?

この方法の利点は、htmlファイルの下部から同じイメージデータを使用して、イメージを複数の場所でページに挿入できることです。

+0

トラフィックを浪費しないように(イメージを複数回ロードする必要がある)、複数のイメージを同じイメージにして1つの位置に配置する必要があるという問題がありますか? –

+1

さまざまなサイズの複数の場所で画像を使用したいと考えています。 – newbieforever

答えて

0

HTML5を使用している場合、キャッシュについて心配する必要はありません。ブラウザはすべてのイメージを読み込んでイメージリストに格納します。したがって、イメージは一度だけ読み込まれ、キー(ソースイメージへのURL)が見つかるすべての場所で再利用されます。

HTMLのみを使用している場合は、画像のURLを使用する必要があるすべての場所にコピーしてください。 HTMLで変数を宣言することはできないため、文書内の別の場所から変数を変更することはできないため、これは必要です。この目的のためには、たとえばjavascriptが必要になります。

次に、CSSを使用して画像を要件に合わせることができます。 Yuはヘッダーにクラスを定義し、imgタグにこれらのクラスを持たせるか、スタイルプロパティをインラインで入力するか、外部CSSファイルをインポートすることができます。

EDIT:

は、JavaScriptでの例では、ここでは、関数changeImageが今宣言され

<body> 
    <img id="img" src="myIMG.jpg"> 

    <script type="text/javascript"> 
    function changeImage(id, src) { 
     document.getElementById(id).src=a; 
    } 
    </script> 
</body> 

にこのコードを追加することです。この関数は、onclickまたはscriptタグの内部で呼び出すことができます。最初のパラメータとしてIDを使って正しいイメージを指定できます(すべてのイメージにIDを与え、ブラウザのイメージリストと混同しないでください。ここでimgタグにIDを定義します)。 2番目のパラメータとして新しいソースurl。

+0

Hvala Ivo!さて、どのようにjavascriptの最も単純な形式でこれを動作させるだろうか? – newbieforever

0

TL; DR:純粋なHTML/CSSの場合 - 残念なことに、

Sciter Notesプロジェクトでは、画像が埋め込まれたノート(プレーンHTMLファイル)を保存する必要があります。

理想的には、このような何かを行うことができるはず:

<img src="cid:1234" /> 
... 
<data id=1234 type="image/png" base64> 
    iVBORw0KGgoAAAA... 
</data> 

が、残念ながらそのようなメカニズムはまだありません。

しかし、上記で説明したスキーマをスクリプトで実装することはできますが、

+0

はい、私の質問はそのような解決策にちょうど言及しました... – newbieforever

+0

''の場合、唯一の解決策はあなたの質問のようなインライン画像データを使用することです。 –

関連する問題