CODEWITHSUNDEEP
angularjs
Rober
Rober

Reputation: 6116

Error ERR_NAME_NOT_RESOLVED in AngularJS

I have an AngularJS 1.0.7 webapp.

I had this code:

<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>

This is working great! However, we are improving our user experience and some parts are being redesign. Our designer suggest this change:

<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>

This means, the image is not loaded as an img tag with ng-src attribute anymore, and it´s loading it in a background-img css property. This is a better approach from the design point of view.

Of course, when this is done, I get this error: 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

Is there any way to achieve what we are trying to do and avoid this error?

Upvotes: 0

Views: 3582

Answers (1)

michelem
michelem

Reputation: 14590

Yes use ng-style:

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

Upvotes: 2

Related Questions