Question

我有一个AngularJS 1.0.7 webapp。

我有这段代码：

<div class="inspiration-wrapper">                       
                        <a href="/{{locationService.getLangKey()}}/{{'URL_BOAT_RENTALS_IBIZA' | translate}}" 
                           class="inspiration-link">                            
                            <img ng-src="//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/inspiration/ibiza/inspiration-ibiza-1.jpg"
                                 class="inspiration-image"
                                 alt="{{'ALT_INSPIRATION' | translate}} {{'INSPIRATION_IBIZA' | translate}}"
                                 title="{{'TITLE_INSPIRATION_IBIZA' | translate}}">
                            <div class="inspiration-title" style="left: 270px">
                                {{'INSPIRATION_IBIZA' | translate}}
                            </div>
                        </a>                        
                    </div>

这很棒！但是，我们正在改善用户体验，并且正在重新设计一些部件。我们的设计师建议这种改变：

<div class="inspiration-wrapper" style="background-image:url('//{{S3_BUCKET}}.{{PHOTO_SERVER_URL}}/img/inspiration/ibiza/inspiration-ibiza-1.jpg')">                        
                        <a href="/{{locationService.getLangKey()}}/{{'URL_BOAT_RENTALS_IBIZA' | translate}}" 
                           class="inspiration-link" alt="{{'ALT_INSPIRATION' | translate}} {{'INSPIRATION_IBIZA' | translate}}"
                   title="{{'TITLE_INSPIRATION_IBIZA' | translate}}">
                            <div class="inspiration-title">
                                {{'INSPIRATION_IBIZA' | translate}}
                            </div>
                        </a>                        
                    </div>

这意味着，图像不再作为带有ng-src属性的img标签加载，而是将其加载到background-img css属性中。从设计的角度来看，这是一种更好的方法。

当然，完成后，我收到此错误：GET http://%7B%7Bs3_bucket%7D%7D.%7B%7Bphoto_server_url%7D%7D/img/inspiration/ibiza/inspiration-ibiza-1.jpg net::ERR_NAME_NOT_RESOLVED

有没有办法实现我们想要做的事情并避免这个错误？

Answer 1

是使用ng-style：

<div class="inspiration-wrapper" ng-style="{'background-image': 'url(//' + S3_BUCKET + '.' + PHOTO_SERVER_URL + '/img/inspiration/ibiza/inspiration-ibiza-1.jpg)'}">

AngularJS中的错误ERR_NAME_NOT_RESOLVED

1 个答案: