Question

我有两个用于两个不同图像的URL，其中一个[src]属性绑定有效，而另一个则无效。可能是什么原因？

有效：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
</head>
<body>
	<img width="300px" height="300px" onclick="mark(this.id)" src="img2/sunduk-iz-duba-kod-ds-12-pod-zakaz-6284723_big.jpg" id="1">
   <img width="300px" height="300px" onclick="mark(this.id)" src="img2/sunduk-iz-duba-kod-ds-12-pod-zakaz-6284723_big.jpg" id="2">
     <img width="300px" height="300px" onclick="mark(this.id)" src="img2/sunduk-iz-duba-kod-ds-12-pod-zakaz-6284723_big.jpg" id="3">
     <button id="btn" onclick="TryAgain()">Try Again</button>
     <p id="demo"></p>
     </body>
</html>

不起作用：

<img [src]="https://www.gstatic.com/webp/gallery3/2.png" />

Answer 1

为什么使用[src]简单使用src

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==" />

即使您是第一种情况，也无法使用check this link

您[src]在您的组件中定义了源链接，例如[src]="somecomponentproperty"

Answer 2

尝试这种方式

在组件中

>>> etree.XPath("text()")(root)
['\n    text-first\n    ', '\n    text-middle\n    ', '\n    text-last\n']

以HTML格式

import { Component } from '@angular/core';

//This is required
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {

  //Constructor Required
  constructor(private sanitizer:DomSanitizer){
  }

  //Call this method in the image source, it will sanitize it.
    transform(){
      return this.sanitizer.bypassSecurityTrustResourceUrl(this.base64Image);
  }

  base64Image='data:image/png;base64, /9j/4AAQSkZJRgABAQAAAQABAAD/2wBD.......';


}

src属性绑定在angular6中不起作用

2 个答案: