Error ERR_NAME_NOT_RESOLVED in AngularJS

Question

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?

michelem · Accepted Answer · 2015-07-13 10:08:04Z

2

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)'}">

edited Jul 13, 2015 at 10:08

answered Jul 13, 2015 at 9:31

michelem

14.6k5 gold badges55 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Rober Over a year ago

The error has disappear. However the images are not loading. I just added "ng-" before style. Before that the images were displaying.

michelem Over a year ago

Check your final url is good, inspect element and look at what url it's asking

Rober Over a year ago

Url looks good. ng-style="background-image:url('//yanpy.dev.s3.amazonaws.com/img/inspiration/ibiza/inspiration-ibiza-1.jpg')". If I just inspect the element and remove ng- the image is automatically displayed.

michelem Over a year ago

Please try this

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

Collectives™ on Stack Overflow

Error ERR_NAME_NOT_RESOLVED in AngularJS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related