Javascript 如何获得；这"；背景图像'；s的url使用“$事件.目标“；以离子模式显示

如何在模式中显示单击的图像

视图中：

<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-01.jpg)'}"><img src="assets/alpha-4x3.png"></a>
<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-02.jpg)'}"><img src="assets/alpha-4x3.png"></a>

 $scope.openModal = function($event) {
   $scope.modal.show();
   $scope.poppedUpImg = $event.target.style.backgroundImage;
 };

<ion-content class="p20">
  <img ng-src="{{poppedUpImg}}" src="" alt="">
</ion-content>

在模式模板中：

<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-01.jpg)'}"><img src="assets/alpha-4x3.png"></a>
<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-02.jpg)'}"><img src="assets/alpha-4x3.png"></a>

 $scope.openModal = function($event) {
   $scope.modal.show();
   $scope.poppedUpImg = $event.target.style.backgroundImage;
 };

<ion-content class="p20">
  <img ng-src="{{poppedUpImg}}" src="" alt="">
</ion-content>

---

未测试，但我猜

$event.target.style.backgroundImage

是

“url（assets/img/…”

。要生成正确的图像

src

，需要提取括号之间的url：

$scope.poppedUpImg = $event.target.style.backgroundImage
                                        .split('("')[1]
                                        .split('")')[0];

编辑：

<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-01.jpg)'}"><img src="assets/alpha-4x3.png"></a>
<a ng-click="openModal($event)" ng-style="{'background-image': 'url(assets/img/img-02.jpg)'}"><img src="assets/alpha-4x3.png"></a>

 $scope.openModal = function($event) {
   $scope.modal.show();
   $scope.poppedUpImg = $event.target.style.backgroundImage;
 };

<ion-content class="p20">
  <img ng-src="{{poppedUpImg}}" src="" alt="">
</ion-content>

如果用户单击了

）

示例（单击“包含”的小拇指或较大的背景）：

获取此错误时
无法读取实际有效的未定义属性的“split”。问题是我在上面提到我在放置“一些文本”，实际上我在所有div中放置了一些透明的
，当我用一些文本进行更改时，您的代码工作了。为了拥有一个图像并使其按需要工作，我这样编码
$event.srcement.parentElement.style.backgroundImage.split（“（“）[1].split（“”）”）[0]
谢谢，如上所述，如果锚内有图像，那么您的答案对我来说不起作用。希望有比我更好的方法：）不确定。你说得对<代码>$event.target
当锚点中有子元素时会导致问题。我已经添加了一个更安全的解决方案示例。