TWebBrowserで相対パス画像を表示する方法は？

私はDesignMode（Doc.DesignMode：= 'On'）でTWebBrowserを使用してHTMLドキュメントを作成しています。 TWebBrowserにロードされているドキュメント（ディスク上のHTMLファイル）はありません。私はTWebBrowserで直接ゼロからドキュメントを作成します。 HTMLコードはTWebBrowserから抽出され、c：/MyProjects/SomeHtmlName.htmlとして保存されます。TWebBrowserで相対パス画像を表示する方法は？

問題は、相対パスがある場合、挿入する画像が表示されないことです。

<IMG src="file:///c:/MyProjects/resources/R.PNG">

しかし、私が入力したとします：

<IMG border=0 src="resources\R.PNG"> 
<IMG border=0 src="resources/R.PNG"> <---- preferred so it will work on Linux

ではなくのイメージプレースホルダーが表示されます、私はWebブラウザーでこのコードを貼り付ける場合、正確に、それは瞬時に画像が表示されます

詳細実際の画像

ルートパスが変更された場合や、FTPでアップロードした場合でもウェブサイトが動作するように、相対パスが必要です。

procedure TForm1.Button1Click(Sender: TObject); 
begin 
    LoadDummyPage; 
    SetHtmlCode('<img src="resources/test_img.PNG">'); 
    Memo1.Text:= GetHtmlCode; 
end; 



function TForm1.LoadDummyPage: Boolean; 
const FileName: string= 'c:\MyProject\_ONLINE WEB SITE\dummy.html'; 
begin 
    if not Assigned(wbBrowser.Document) 
    then wbBrowser.Navigate('about:blank'); 

    Result := FileExists(FileName); 
    if Result 
    then wbBrowser.Navigate('file://' + FileName) 
    else Caption:= 'file not found'; 
end; 



procedure TForm1.SetHtmlCode(const HTMLCode: string); 
var 
    Doc: Variant; 
begin 
    if not Assigned(wbBrowser.Document) 
    then wbBrowser.Navigate('about:blank'); 

    Doc := wbBrowser.Document; 
    Doc.Write(HTMLCode); 
    Doc.Close; 
    Doc.DesignMode := 'On'; 

    WHILE wbBrowser.ReadyState < READYSTATE_INTERACTIVE 
    DO Application.ProcessMessages; 

    Doc.body.style.fontFamily := 'Arial'; 
    Doc.Close; 
end; 


function TForm1.GetHtmlCode: string;    { Get the HTML code from the browser } 
var 
    Doc: IHTMLDocument2; 
    BodyElement: IHTMLElement; 
begin 
    if Assigned(wbBrowser.Document) and (wbBrowser.Document.QueryInterface(IHTMLDocument2, Doc) = S_OK) then 
    begin 
    BodyElement := Doc.body; 
    if Assigned(BodyElement) then 
     Result := BodyElement.innerHTML; 
    end; 

    if Result > '' 
    then Result := StringReplace(Result, '="about:', '="', [rfReplaceAll, rfIgnoreCase]); { Fix the 'How stop TWebBrowser from adding 'file:///' in front of my links' bug } 
end;

出典

2017-02-02 Ampere

実行可能ファイルの現在の作業ディレクトリがc：/ MyProjects /の場合は機能しますか？ – mjn42

私が使用できる 'ハック'は、HTMLを後処理して 'file：/// c：/ MyProjects /' – Ampere

@ mjn42 --nopeを削除することです。おそらく画像が 'Resources'フォルダにあるからでしょうか？さらに、私はTWebBrowserの 'root'フォルダはInternet Explorerのデフォルトのルートフォルダ（これが何であっても）で、アプリケーションのフォルダではないと思う。 – Ampere

BASEタグを含む有効なHTML「テンプレート」文字列/ストリームを事前にロードする必要があります（末尾にスラッシュを使用）。 "file:///c:/MyProjects/"。

編集モードに切り替えます。ここで画像SRCは相対的である必要があります。 "resources/R.PNG"。最終的に抽出されるHTML ater編集は、body.innerHTMLまたはbody.outerHTML（必要な場合）にする必要があります。あなたは全体のドキュメントソース（Googleそれを）取ることもできます。

BASEタグのない有効なHTML/Bodyで抽出したソースをラップし、c:\MyProjectsにディスクに保存します。

ですが、IMG SRCのコードは完全なパスです！

何もできません。これはDOMがどのようにHTMLを表現するかです.HTMLソースコードは必要ありません。この動作は一貫していません。またに依存していますあなたは画像を挿入します（私はexecCommandを使用せず、独自のダイアログを持って自分のhtmlコードを挿入します）。抽出されたソース"file:///c:/MyProjects/"を手動で空の文字列に置き換える必要があります。少なくとも、これは私がそれをする方法です。

編集：外部ファイルにNavigate()は必要ありません。テンプレート/空のHTMLをdocument.write(HTML)で書くことができます。私のために出力され

const 
    HTML_TEMPLATE = '<html><head><base href="file:///%s"></head><body style="font-family:Arial">%s</body></html>'; 

procedure TForm1.LoadHTML(HTMLCode: string); 
var 
    Doc: Variant; 
    HTML, Path: string; 
begin 
    Path := 'D:\Temp\'; 
    HTML := Format(HTML_TEMPLATE, [Path, HTMLCode]); 
    WebBrowser1.Navigate('about:blank'); 
    Doc := WebBrowser1.Document; 
    Doc.Write(HTML); 
    Doc.Close; 
    Doc.DesignMode := 'On'; 
end; 

procedure TForm1.Button1Click(Sender: TObject); 
begin 
    LoadHTML('<b>Hello</b><img SRC="resources/1.png">'); 
end; 

procedure TForm1.Button2Click(Sender: TObject); 
var 
    Doc: IHTMLDocument2; 
begin 
    Doc := WebBrowser1.Document as IHTMLDocument2; 
    if Assigned(Doc) then 
    begin 
    ShowMessage(Doc.body.innerHTML); 
    end; 
end;

：<B>Hello</B><IMG src="resources/1.png">

はこれを試してみてください。一部のケースでは、srcの場合はにフルパスが含まれている場合があります。このようなことが起きたときは、私は100％確信できません。手動でパスを置き換えることでこの状況に対処する準備ができている必要があります。私はいつもこの問題に取り組んでいます。

出典

2017-02-03 11:44:53 kobik

"手作業で交換する必要があります..." - しかしこれは私がすでにやっていることです（私が質問の下に載せたコメントを見てください:)私はフルイメージパスを提供していました。相対的に完全なそして、複雑な「ベース」を使用する必要もありません。私はこれを「ハック」と考え、TWeBBrowserに実際の相対パスを使用させたいと思った。 – Ampere

@DarkPresidentOfAmerica、「TWeBBrowserが実際の相対パスを使用できるようにしたい」しかし、あなたがBASEを使うときは*します！ :) innerHTMLは、DOMが実際にソースコードをどのように解析したかを表現したものです。私はこれが "ハッキー"であることを知っていますが、AFAIKについてはそれほど多くはありません。 – kobik

それから、私は単に完全なパスを使い、後でHTMLコードを処理して相対的なものに変換します。 – Ampere

私は、このような標準的な方法ですべてのHTTP要求にサービスを提供することが可能であるインターネットダイレクト（インディ）TIdHttpServer、のような小さな内蔵Webサーバーを使用することをお勧めします。これにより、潜在的なすべてのファイルシステムの問題がなくなります。

出典

2017-02-02 13:44:33 mjn42

提案に感謝しますが、このハックは私よりも極端です:)コンピュータにWebサーバーをインストールすることの意義について考えてみましょう。ほとんどのウイルス対策プログラムはそれにコメントする何かを持っています： – Ampere

それだけでローカルホスト（127.0.0.1）にバインドします。多くのプロセスがローカルポートを開き、AVは不平を言っていません。ポートスキャンで不平を言う可能性があります。 – mjn42

TWebBrowserで相対パス画像を表示する方法は？

答えて

関連する問題