Question

我试图在我的Angular6项目之一中使用动态图像路径作为背景图像。我曾尝试使用[style.background-image]和[style.background]甚至是encodeURI来修复路径中的空格，也尝试过使用* ngIF使其在加载后呈现。

情况1：

imgPath是绝对路径，我要将JSON数据的路径附加到该绝对路径。

HTML代码

mysqldump -u <USER> -p -h <HOST> <DB> > <PATH>/test.sql

组件

使用encodeURI（）函数检查图像中的空格和其他括号


mysql -u <USER> -p -h <HOST> <DB> < <PATH>/test.sql
Enter password: 
ERROR 1227 (42000) at line 18: Access denied; you need (at least one of) the SUPER privilege(s) for this operation

输出

Image comparison of article

从图片“ s / Absorica％20（2）.png”中可以看到括号，这可能是导致错误的原因，但不确定。

其他情况

我尝试使用<a routerLink="/article/{{news.id}}"> <img [style.background-image]="'url(' + imgPath + news.encodedImage.encocoded_primary_image + ')'"> </a>，'encocoded_primary_image': encodeURI(res['primary_image']['file_path'])，将image标签更改为div标签。

但是我无法理解为什么虽然正确生成了路径，但为什么很少渲染图像而又很少渲染图像，我已经在新标签页中打开了它们，从而证实了这一点。

任何帮助将不胜感激

Answer 1

在background-image: url中接受字符串。您必须将图像路径添加到字符串。

"'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'"

<a routerLink="/article/{{news.id}}">
  <img [style.background-image]="'url(\'' + imgPath + news.encodedImage.encocoded_primary_image + '\')'">
</a>

https://developer.mozilla.org/en-US/docs/Web/CSS/background-image

https://www.w3schools.com/csSref/pr_background-image.asp

尝试使用escape（）方法，但该方法已被弃用。小心使用它。

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/escape

动态图像路径未在Angular 7的[style.background-image]属性中显示

从图片“ s / Absorica％20（2）.png”中可以看到括号，这可能是导致错误的原因，但不确定。

1 个答案: