如何使用服务器渲染“绝对化” href / src值？

编程问答 2022-06-06

问题描述

假设我有一个元素，其href / src是这样的根路径：href="/abc/def"。 假设我还写了一个看起来像这样的函数：

function absolutizeHREF(href) {
  const URLBase = new URL(`http://${process.env.HOST}:${process.env.PORT}/`);

  return new URL(href,URLBase);
}

并将其结果作为属性发送到模板。

假设HOST和PORT事先是已知的，那有点用。但是我宁愿有与环境无关的解决方案。根据{{​​3}}，base构造函数的URL()选项看起来像origin，所以问题是有一种简单的方法可以将其值从服务器实例中提取出来，而只需插入为{ {1}}对构造函数有用吗？

编辑：docs给了我一些想法：

base

因此，可以将第一个函数的结果分配为传递给模板的对象的方法，然后在该模板的相对链接上对其进行调用。但是，它会因链接而异，这使问题重新回到平方-相同内容的不同hrefs / srcs。

解决方法

为什么需要绝对路径？您不需要它来显示图像。设置公共路由以提供您的静态文件并使用相对路径：

img(src=`/img/${imgName}`)

您不需要像这样设置路径：

img(src=`http://example.com:80/img/${imgSrc}`)

但是您可以将/放在相对路径之前，并且将自动使用正确的主机和端口：

img(src=`/img/img1.jpg`)
expressexpressexpressjavascriptpug