Question

这是我的html代码，我想在我的背景图片中设置动态网址：

<div class="top-banner-bg" style="background-image: url({{ imageToShowURL }})">
</div>

这是我在ts文件中的代码，以角度显示：

ngOnInit() {

    this.imageService.getHomePageBanner().subscribe(data => {
      if (data['ok']) {
        this.imageToShowURL = 'http://194.135.90.60/Back_end_Media/Media/Screenshot_from_2018-10-25_17-31-43.png';
      }
    }, error => {
      console.log(error);
    });
    }

但是在我的html代码中，此样式无效。

我该如何解决此问题？

Answer 1

使用$host = '127.0.0.1'; $db = 'test'; $user = 'root'; $pass = ''; $charset = 'utf8mb4'; $dsn = "mysql:host=$host;dbname=$db;charset=$charset"; $options = [ PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_EMULATE_PREPARES => false, ]; try { $pdo = new PDO($dsn, $user, $pass, $options); } catch (\PDOException $e) { throw new \PDOException($e->getMessage(), (int)$e->getCode()); } $stmt = $pdo->query("SELECT V.dnaCode, V.Chr, V.Start, V.End, V.Alt, V.Ref, V.zygosity, V.coverage, V.InsertPos FROM variante as V WHERE V.Start='" .$start. "'"); while ($row = $stmt->fetch()) { echo " <tr> <td>'.$row["dnaCode"].'</td> <td>'.$row["Chr"].'</td> <td>'.$row["Start"].'</td> <td>'.$row["End"].'</td> <td>'.$row["Alt"].'</td> <td>'.$row["Ref"].'</td> <td>'.$row["zygosity"].'</td> <td>'.$row["coverage"].'</td> <td>'.$row["InsertPos"].'</td> </tr>"; }属性返回样式并使用get指令

ngStyle

<div class="top-banner-bg" [ngStyle]="getBackgroundStyle">

Answer 2

您可以使用get getBackgroundStyle(){ return { 'background-image':'url(' + this.imageToShowURL + ')' } }来完成

ngStyle

如何在背景图片中设置动态路径：url（）

2 个答案: