Google云端存储存在奇怪的CSS背景图片问题

Question

我将图像存储在Google云端存储中，并在Ionic / Angular应用中使用。图像显示为div元素的背景。它们大多显示正常，但在某些情况下，图像丢失了。无论页面被重新加载多少次，它都会丢失一致的特定图像 - 而不是其他图像。

右键单击背景图像以获取背景URL，然后在浏览器中粘贴该URL，结果图像显示正常。

scss代码包含图像的基本样式，背景图像URL在HTML文件中内嵌添加。

item.scss

    offer {
    .card-image{
        background-color:lightgray; 
        background-position:center; 
        background-size:cover; 
        height:10rem; 
        width:100%;
    }
}

item.html

    <ion-card>
  <div class="card-image" [ngStyle]="{ 'background-image' : 'url(' + offer?.imageUrl + ')' }"> 
  </div>
  <ion-item text-wrap>
    <h2 text-wrap>{{ offer?.name }}</h2>
    <p>{{ offer?.provider }}</p>
  </ion-item>
  <!--
  <ion-item>
    <span item-left>18 min</span>
    <span item-left>(2.6 mi)</span>
    <button ion-button icon-left clear item-end>
      <ion-icon name="navigate"></ion-icon>
      Start
    </button>
  </ion-item>
  -->
</ion-card>

这就是中间项目图像缺失所呈现的效果......

Answer 1

好的，我想我看到了问题。经过一番头痛之后，事实证明逃避背景图像的URL时出现了一些错误。因此，任何名称中都没有空格的图像都不存在。

解决方案：更改文件名以避免空格或转义URL。它现在按预期工作了！