我可以将径向渐变放入图像中吗？

Question

我有这个HTML代码

<div class="right">
     <div class="img">
          <img ng-src="{{ticket.thumbnail}}">
     </div>
</div>

这个scss

.right{
      width: 25vw;
      display: flex;
      justify-content: center;
      align-items: center;
      border-bottom-right-radius: 5px;
      border-top-right-radius: 5px;

      background-image: radial-gradient(circle at 0% 0%, $mainBackground 9px, transparent 9px),
      radial-gradient(circle at 0% 100%, $mainBackground 9px, $footer 9px);
      .img{
        overflow: hidden;
        display: flex;
        justify-content: center;

        img{
          height: 16.2vh;
        }
      }

    }

结果是：

我希望两个边界都合适。我知道要用坚实的背景来做，而不是用图像。我知道要做的是：

万分感谢

EDITED

我试图将图像放在.right类的背景中：

<div class="right" ng-style="{'background-image' : 'radial-gradient(circle at 0% 0%, #150357 9px, transparent 9px),
          radial-gradient(circle at 0% 100%, #150357 9px, url({{ticket.thumbnail}}) 9px)'}">

</div>

问题在于它并没有显示任何内容：

html输出为：

我知道如果我能在背景中显示图像，那就应该像想要的那样工作。

Answer 1

不，我无法在图像中执行此操作。我应该先编辑