如何在嵌入标签中使用字符串变量作为 src 链接？答案

【问题标题】：How to use a string variable as src link in embed tag?如何在嵌入标签中使用字符串变量作为 src 链接？
【发布时间】：2021-06-06 20:19:25
【问题描述】：

我必须在我的项目中实现一个文档查看器。由于限制，文档的链接作为路由器参数接收，并在doclauncher.ts文件中名为link的变量中正确接收现在我在doclauncher.html 文件中尝试了这两个选项，但它们似乎都不起作用：

div class="container">
  <embed id = "doc"
    src = ""
    type="application/pdf"
    height="100%"
    width="100%"
  />
</div>
<script>
  document.getElementById("doc").src= '+ {{link}} +'
</script>

和

div class="container">
  <embed id = "doc"
    src = {{link}}
    type="application/pdf"
    height="100%"
    width="100%"
  />
</div>

我该怎么办？在打字稿中使用 Angular 11.2.13 和后端编辑：这是检索链接的方式

 ngOnInit(): void {
      this.route.queryParams.subscribe(params => {
      this.link = params['link'];
    });
}

我已通过打印 this.link 进行检查：)

【问题讨论】：

{{ }} 括号依赖于框架。因此需要检查框架或基础技术在通过 {{ }} 语法调用时是否提供值。试试 console.log 吧。通常 document.getElementById("doc").src= '+ link +';就 JS 而言应该就足够了。
我正在使用 Angular 11.2.13 和打字稿......这也不起作用
然后只需运行console.log，看看是否有任何错误错误提示...。如果上面的代码它自己不工作，那么错误将为此挂载，或者如果代码工作但为了什么任何原因链接值稍微落后或链接范围在其他地方或价值不符合预期的控制台会说明。在打开开发人员工具的情况下点击刷新。我猜测 {{ }} 有自己的计算成本，因为 src 属性有自己的线程，它的速度要快得多，并且在 DOM 内容就绪状态下执行，然后开始获取内容。
试试这个，取用 {{link}} 替换的实际值。将其添加为字符串，例如src = '/path/file.pdf' 运行以查看代码是否有效。如果是这样，那么我们就有线程竞赛。浏览器对象模型在框架替换值之前以 src 方式执行。
只是添加到上面这就是我们如何进行延迟加载.....我们要么保持 src 值为空，然后通过触发器又名当用户通过某个视图范围时，我们将空值替换为实际值。值发生变化的那一刻，浏览器启动会在不到一眨眼的时间内开始获取过程。这是您无法更改的 BOM 行为。

标签： html typescript src

【解决方案1】：

像这样使用 setattribute

<script>
  document.getElementById("doc")setAttribute("src", "{{link}}")
</script>

【讨论】：