如何在 TWebBrowser 中显示相对路径图像?
How to show relative-path images in TWebBrowser?
我在设计模式 (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"> <---- preferred so it will work on Linux
它将显示图像占位符而不是实际图像。
我需要相对路径,这样即使我更改根路径或将其上传到 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;
我建议使用小型嵌入式 Web 服务器,例如 Internet Direct (Indy) TIdHttpServer,它能够以标准方式处理所有 HTTP 请求。这消除了所有潜在的文件系统问题。
您需要 pre-load 一个有效的 HTML "template" string/stream 包括 BASE
标签,您可以在其中设置所需的路径(带有尾部斜杠),例如"file:///c:/MyProjects/"
。
然后切换到编辑模式,您的图像 SRC
应该是相对的,例如"resources/R.PNG"
。您最终提取的 HTML 编辑应该是 body.innerHTML
或 body.outerHTML
(无论您需要什么)。您甚至可以获取整个文档源(google)。
用有效的 HTML/Body 包装提取的源,不带 BASE
标签,并保存到磁盘 c:\MyProjects
。
but the code resulted for IMG SRC is full path!
您对此无能为力。这就是 DOM 代表 HTML 的方式——不需要 HTML 源代码。这种行为是不一致的。并且还取决于 如何 你插入图像(我不使用 execCommand
并且有我自己的对话框并插入我自己的 html 代码)。您需要手动将提取的源 "file:///c:/MyProjects/"
替换为空字符串。至少,我是这样做的。
编辑:您不需要 Navigate()
到外部文件。您可以通过 document.write(HTML)
.
编写 "template"/"empty" 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% 确定这种情况何时发生。但是您需要准备好通过手动替换路径来处理这种情况。关于这个没有决定性的文件,所以我总是在任何情况下处理这个问题。
我在设计模式 (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"> <---- preferred so it will work on Linux
它将显示图像占位符而不是实际图像。
我需要相对路径,这样即使我更改根路径或将其上传到 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;
我建议使用小型嵌入式 Web 服务器,例如 Internet Direct (Indy) TIdHttpServer,它能够以标准方式处理所有 HTTP 请求。这消除了所有潜在的文件系统问题。
您需要 pre-load 一个有效的 HTML "template" string/stream 包括 BASE
标签,您可以在其中设置所需的路径(带有尾部斜杠),例如"file:///c:/MyProjects/"
。
然后切换到编辑模式,您的图像 SRC
应该是相对的,例如"resources/R.PNG"
。您最终提取的 HTML 编辑应该是 body.innerHTML
或 body.outerHTML
(无论您需要什么)。您甚至可以获取整个文档源(google)。
用有效的 HTML/Body 包装提取的源,不带 BASE
标签,并保存到磁盘 c:\MyProjects
。
but the code resulted for IMG SRC is full path!
您对此无能为力。这就是 DOM 代表 HTML 的方式——不需要 HTML 源代码。这种行为是不一致的。并且还取决于 如何 你插入图像(我不使用 execCommand
并且有我自己的对话框并插入我自己的 html 代码)。您需要手动将提取的源 "file:///c:/MyProjects/"
替换为空字符串。至少,我是这样做的。
编辑:您不需要 Navigate()
到外部文件。您可以通过 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% 确定这种情况何时发生。但是您需要准备好通过手动替换路径来处理这种情况。关于这个没有决定性的文件,所以我总是在任何情况下处理这个问题。