微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

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

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

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

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

  return new URL(href,URLBase);
}

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

假设HOSTPORT事先是已知的,那有点用。但是我宁愿有与环境无关的解决方案。根据{{​​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`)

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。