如何在TWebBrowser中显示相对路径图像？ [英] How to show relative-path images in TWebBrowser?
问题描述
我在DesignMode（Doc.DesignMode：='On'）中使用TWebBrowser来编写HTML文档。 TWebBrowser中没有加载文件（磁盘上的HTML文件）。我直接在TWebBrowser中创建从零开始的文档。 HTML代码将从TWebBrowser中提取并保存为c：/MyProjects/SomeHtmlName.html。
问题在于，如果插入的图像不显示图像相对路径。
更确切地说，如果我将这段代码粘贴到WebBrowser中，它会立即显示图像：
< IMG src =file：/// c：/MyProjects/resources/R.PNG>
但是，如果我输入：
< IMG border = 0 src =resources\R.PNG>
< IMG border = 0 src =resources / R.PNG> < ----首选，它可以在Linux
上运行，它将显示一个图片占位符，而不是
我需要相对路径，所以如果我更改根路径或者我通过FTP上传它，网站仍然可以工作。
procedure TForm1.Button1Click（Sender：TObject）;
begin
LoadDummyPage;
SetHtmlCode（'< img src =resources / test_img.PNG>'）;
Memo1.Text：= GetHtmlCode;
end;
函数TForm1.LoadDummyPage：Boolean;
const FileName：string ='c：\MyProject\_ONLINE WEB SITE\dummy.html';
开始
如果没有分配（wbBrowser.Document）
然后wbBrowser.Navigate（'about：blank'）;
结果：= FileExists（FileName）;
if Result
then wbBrowser.Navigate（'file：//'+ FileName）
else标题：='找不到文件';
end;
过程TForm1.SetHtmlCode（const HTMLCode：string）;
var
文件：变体;
开始
如果没有分配（wbBrowser.Document）
然后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;
函数TForm1.GetHtmlCode：string; {从浏览器获取HTML代码}
var
Doc：IHTMLDocument2;
BodyElement：IHTMLElement;如果已分配（wbBrowser.Document）和（wbBrowser.Document.QueryInterface（IHTMLDocument2，Doc）= S_OK），
开始
，则
begin
BodyElement：= Doc.body;
如果已分配（BodyElement），则
结果：= BodyElement.innerHTML;
end;
如果结果> ''
然后Result：= StringReplace（Result，'=about：'，'=''，[rfReplaceAll，rfIgnoreCase]）; {修复'如何阻止TWebBrowser在我的链接前添加'file：///'错误}
end;
您需要预先加载一个有效的HTML模板包含 BASE 标记的字符串/流，您可以在其中设置所需的路径（尾随斜线），例如 文件：/// C：/ MyProjects下/。
切换到编辑模式，您的图片 SRC 应该是相对的，例如， 资源/ R.PNG。您最终提取的HTML ater编辑应该是 body.innerHTML 或 body.outerHTML （无论您需要什么）。你甚至可以把整个文档源代码（谷歌它）。
用有效的HTML / Body包装提取的源代码，而不需要 BASE 标记并保存到 c：\ MyProjects 。
但导致IMG SRC的代码是完整路径！
您无法对此做任何事情。这就是DOM代表HTML的原因 - 它不需要HTML源代码。这种行为并不一致。并且还取决于如何插入图像（我不使用 execCommand 并拥有自己的对话框并插入自己的html代码）。您需要用空字符串手动替换提取的源file：/// c：/ MyProjects /。至少，这是我的方式。
编辑：您不需要 Navigate（）到一个外部文件。你可以通过 document.write（HTML）来编写template/emptyHTML。试试这个：
const
HTML_TEMPLATE ='< html>< head>< base href =file：/ //％s>< / head>< body style =font-family：Arial>％s< / body>< / html>';
procedure TForm1.LoadHTML（HTMLCode：string）;
var
文件：变体;
HTML，路径：string;
begin
Path：='D：\Temp\';
HTML：=格式（HTML_TEMPLATE，[Path，HTMLCode]）;
WebBrowser1.Navigate（'about：blank'）;
Doc：= WebBrowser1.Document;
Doc.Write（HTML）;
Doc.Close;
Doc.DesignMode：='On';
end;
程序TForm1.Button1Click（发件人：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;
如果Assigned（Doc）则
begin
ShowMessage（Doc.body.innerHTML）;
end;
end;
我的输出是：< B> Hello< / B> < IMG src =resources / 1.png> 。在某些情况下， src 可能包含完整路径。当发生这种情况时，我不能100％确定。但您需要通过手动更换路径来处理这种情况。没有关于此的确凿文件，所以我总是在任何情况下处理这个问题。
I am using TWebBrowser in DesignMode (Doc.DesignMode := 'On') to compose a HTML document. There is no document (HTML file on disk) loaded in TWebBrowser. I create the document from zero directly in TWebBrowser. The html code will be extracted from TWebBrowser and saved as c:/MyProjects/SomeHtmlName.html.
The problem is that it won't show images I insert if they have relative path.
More exactly, if I paste this code in the WebBrowser it will instantly display the image:
<IMG src="file:///c:/MyProjects/resources/R.PNG">
However, if I enter:
<IMG border=0 src="resources\R.PNG">
<IMG border=0 src="resources/R.PNG"> <---- preferred so it will work on Linux
it will display an image placeholder instead of the actual image.
I need relative paths so the web site will still work if I change the root path OR if I upload it on 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;
You need to pre-load a valid HTML "template" string/stream including the BASE tag where you set the desired path (with trailing slash) e.g. "file:///c:/MyProjects/".
And switch to edit mode, where your images SRC should be relative e.g. "resources/R.PNG". Your final extracted HTML ater editing should be the body.innerHTML or body.outerHTML (whatever you need). You can even take the whole document source (google it).
Wrap the extracted source with valid HTML/Body WITHOUT the BASE tag and save to disk at c:\MyProjects.
but the code resulted for IMG SRC is full path!
Nothing much you can do about it. this is how the DOM represent the HTML - it's not necessary the HTML source code. this behavior is not consistent. and also depend on how you insert images (I do not use execCommand and have my own dialog and insert my own html code). You need to manually replace the extracted source "file:///c:/MyProjects/" with empty string. at least, this is how I do it.
Edit: You don't need to Navigate() to an external file. you can write the "template"/"empty" HTML via document.write(HTML).
Try this:
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;
The output for me is: <B>Hello</B><IMG src="resources/1.png">. in some cases the src might contain the full path. I can't 100% be sure to when this happens. but you need to be ready to deal with this situation by manually replacing the path. there is no conclusive documentation about this so I always deal with this issue in any case.
这篇关于如何在TWebBrowser中显示相对路径图像？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
