我们如何将 src 属性更改为只有相对路径？答案

【问题标题】：How we can change src attribute to have there only relative paths?我们如何将 src 属性更改为只有相对路径？
【发布时间】：2017-02-11 18:15:48
【问题描述】：

我们有一个 DelphiXE 程序，它使用 TWebBrowser 创建 HTML 文档，并且只将它们的正文存储在 sql 数据库中。

现在我们想将图像添加到文档中。当我们添加图像时，在 src 属性中我们有

src="file:///D:/Projects/Test/IMAGES/img_1.GIF"

D:/Projects/Test 是程序和 HTML 文件的位置。

我们希望在 src 属性中有相对路径，所以当我们改变 src 属性时

s:=elem.outerHTML; 
s:='<IMG border=0 hspace=0 alt="pic 2" src="./IMAGES/955_2.GIF">';
// or s:='<IMG border=0 hspace=0 alt="pic 2" src="IMAGES/955_2.GIF">';
elem.outerHTML:=S

那么src属性不变，保持不变

src="file:///D:/Projects/Test/images/Img_1.GIF"

我们用记事本将HTML文件中的基本目录设置为

<BASE href="D:\Projects\Test\">

没有成功。

我们如何改变 src 属性来获得相对路径？

【问题讨论】：

“但我们会做出任何改变”：您在多大程度上准确地做出了您所询问的改变？这个 q 需要一个 MCVE (stackoverflow.com/help/mcve) 读者应该不必猜测这种细节。
在这种情况下，您的代码应该在 q 中，而不是在注释中。请编辑您的 q。

标签： image delphi twebbrowser

【解决方案1】：

假设以下 HTML：

<body>
    <img border=0 alt="pic 2" src="file:///D:/Projects/Test/IMAGES/img_1.GIF">
    <p>Hello World</p>
</body>

假设这已经被加载到一个名为 WebBrowser1 的 TWebBrowser 组件实例中，

如下使用SetAttribute代替outerHTML：

var
  Body    : IHTMLElement;
  Children: IHTMLElementCollection;
  Element : IHTMLElement;

begin
  Body := (WebBrowser1.Document as IHTMLDocument2).body;
  Children := Body.children as IHTMLElementCollection;
  Element := Children.item( 0, 0 ) as IHTMLElement;
  Element.setAttribute( 'src', './img_1.GIF', 0 );

  // To prove a point:
  ShowMessage( Element.outerHTML );
end;

【讨论】：