I'm writing an ionic application and I have a problem. I'm note sure where the problem is here but I have this code
<div ng-if="ads.length > 0" class="card advertisement itemdetail">
<ks-swiper-container
autoplay="5000"
speed="300"
loop="true"
show-nav-buttons="false"
space-between="5"
pagination-clickable="false"
pagination-is-active="false"
>
<ks-swiper-slide class="swiper-slide" ng-repeat="ad in ads">
<div class="item item-text-wrap">
<a target="_blank" ng-href="{{ad.web}}" onclick="window.open(this.href, '_blank', 'location=no'); return false;">
<img src="{{ad.ad}}"/>
</a>
</div>
</ks-swiper-slide>
</ks-swiper-container>
</div>
Now the problem is that when the ads variable is empty (if it's not, everything works as expected), I'm getting this error in my browser console:
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost:8100/{{ad.ad}}
So my question is, why is it trying to load http://localhost:8100/{{ad.ad}}? Why is the {{ad.ad}} variable treated as plaintext? Shouldn't this all be skipped because the ads.length is 0?
Thanks a lot!
Ok this seems to have solved my issue: https://docs.angularjs.org/api/ng/directive/ngSrc
Related
<div ng-repeat="file in files" class="record-row">
<div class="colCell fileAttributes">
<div ng-if="!(file.thumbnail === '')" class="collCell-container thumbnail-container">
<img class="" ng-src="{{ file.thumbnail }}" />
</div>
<div class="collCell-container name-container">
<a class="name-container--filename">
<span ng-click="getFile(file.id,file.extension,file.fileName)">{{ file.fileName }}</span>
</a>
<div class="name-container--fileweight">
<span>{{ file.fileSizeByte }}</span>
</div>
</div>
</div>
</div>
Angular Version is 1.3.14. The Code worked fine (functions worked and all outputs) until I added ng-src="{{ file.thumbnail }}".
This gives me the error Unknown provider: urlattrFilterProvider <- urlattrFilter
. Even outputting {{ file.thumbnail }} as text outside of the attribute works fine.
Is this way not correct for setting the src of an image?
Just use src="{{file.thumbnail}}"
instead of ng-src="{{file.thumbnail}}"
Not an actual answer but might be helpful:
the Unknown provider:... error usually shows up when we are injecting something to an angular module the wrong way, eiher a mispelled dependency or a dependency injected in the wrong order.
Make sure the error is coming where you're expecting it from, you can just set a breakpoint on exceptions and confirm this.
I have not found any tutorials out there that address how to "properly" create a 404 page in this specific version of Laravel 5.6. I found some outdated once that is a bit different that how Laravel 5.6 works. Any inputs will help.
I found the answer by reading the Laravel Docs "Custom HTTP Error Pages".
Create a "Errors" Folder under "/resources/views/" and create a file named "404.blade.php" then add this code:
#extends('../layouts.app')
#section('content')
<div id="login-container" class="container-fluid" style="background-color: lightgray;">
<div class="row">
<div class="col-md-12 mt-1 mb-1 text-center">
<h1>{{ $exception->getMessage() }}</h1>
back to home
</div>
</div>
</div>
#endsection
then add this route to your "web.php" file:
// 404 Route Handler
Route::any('{url_param}', function() {
abort(404, '404 Error. Page not found!');
})->where('url_param', '.*');
I have written a blog about it: click here
I am trying to get list of location with their photos using google places api.
I am storing the response in a variable vm.locationList. In my view I am iterating over this variable to show location list.
Following is the code
<div ng-repeat = "(key, value) in vm.locationList">
<div class="panel panel-primary">
<div class="panel-body">
<div class="col-md-2">
<div class="pull-left thumbnail">
<span ng-if="vm.getPhotos">
<img src="https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY" class="img-responsive" style="margin-right:10px;">
</span>
</div>
</div>
<div class="col-md-10">
<h4><b>{{value.name}}</b></h4>
<p><i class="fa fa-map-marker" style="color:red"></i> {{value.vicinity}}</p>
<p> open now: {{value.opening_hours.open_now}}</p>
</div>
<div ng-repeat = "type in value.types">
<p style="float:left;width:20%" class="tags">{{type}}<p>
</div>
</div>
</div>
Now to get the photo I place http url request in src attribute of img tag. Though I am getting pics with the list but I see error in console saying bad request.
Following is the error I am getting in console
GET https://maps.googleapis.com/maps/api/place/photo?maxwidth=150&photoreference={{value.photos[0].photo_reference}}&key=API_KEY 400 ()
And here is the http response
<title>Error 400 (Bad Request)!!1</title>
<a href=//www.google.com/><span id=logo aria-label=Google></span></a>
<p><b>400.</b> <ins>That’s an error.</ins>
<p>Your client has issued a malformed or illegal request. <ins>That’s all we know.</ins>
Okay I have got where I was doing mistake. I used Angular's ng-src in place of src attribute. Now its working fine. Binding was not working earlier. I got confused because even though binding was not working image was appearing.
I have the HTML below on my Ionic app:
<a ng-href="#/app/perfil/{{ notification.Notification.model_id }}">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
As you can see, it set the user ID after loading a JSON file. This link works fine on a browser, but for some reason when I try on a real device, my xcode returns an error:
Failed to load webpage with error: The URL can’t be shown
All my data is being served on a HTTPs URL.
Any idea on how to fix that?
After some research, I've changed my ng-href to ui-sref and it worked - actually, ui-sref makes much more sense in this case.
If any one is having the same issue, please read more details here: https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref
My code:
<a ui-sref="appPerfil.perfil-amigo({ user_id: notification.Notification.model_id })">
<img ng-src="{{ notification.Notification.photo }}" class="profile-pic">
<h2 ng-bind-html="notification.Notification.name">{{ notification.Notification.name }}</h2>
<p ng-bind-html="notification.Notification.title">{{ notification.Notification.title }}</p>
</a>
I'm trying to show the image from the database. However, I can't put the angular variable inside the # sign of the Scala template.
<div class="col-sm-6 col-md-3" ng-repeat="product in products">
<a href="#">
<div class="thumbnail">
<img class="img-responsive" ng-src="#routes.BookStore.getImage(product.name)">
...
</div>
</a>
</div>
It gave Error: Can't find the product variable. I also tried:
<img class="img-responsive" ng-src="#routes.BookStore.getImage( {{ product.name }} )">
It still gave me the same error. How can I use the AngularJs variable inside the Scala template?
You CAN NOT that's obvious - Scala template is processed at backend side much, much earlier then it arrives to frontend. Instead your Angular app should have some method which will create a string containing path to the image literally, something like /book-store/get-image/foo.jpg and then add a route to your routes file:
GET /book-store/get-image/:fileName controllers.BookStore.getImage(fileName)
Optionally you can try to go with javascriptRoutes, but it's not necessary.