I'm new in the development of server-side applications. I have a collection in mongodb which stores names of files that store in the root directory /uploads. I have to download them on client side using the angular. But using the ng-src or simple src out of ng-repeat I get a 404 error.
Is there any way to get the client-side access to the directory with the files?
<div class="row jumbotron" ng-repeat="item in items">
<div class="col-sm-1">
<img ng-src="../../../uploads/{{item.logo}}">
</div>
<div class="col-sm-8">
<h4>{{item.name}}</h4>
</div>
<div class="col-sm-2 pull-right">
<button type="button" class="btn btn-lg btn-info" ng-click="showModal($index)">Edit</button>
</div>
</div>
Also tried to provided file through ../ - 404 (Not Found)
<div>
<img src="../../../uploads/38809344bac1a3a77c5d1e0493763849.png">
</div>
The path you provided will go up three folders and then will look for the uploads folder, as each ../ means: Go up one level (relative path notation). If this is not the case, please update the question with a sample of your folder structure. Relative paths start from the current folder in which your HTML file resides on the server.
Another point to keep in mind: If you're using Linux, The privileges of the /uploads folder must allow the application to access it.
Related
So, me and a friend are working on the same laravel project and we store images in the database and in storage/public/cover_images but when he git pulled he did not get the images. We think it is because of the link :
<div class="bookCover">
<img src="/storage/public/cover_images/{{ $book->image }}"
style="width:150px; height:150px; float:left; border-radius:50%; margin-right:25px;">
</div>
How can I fix that?
Just delete the .gitignore file on your storage/ folder and in your friend's storage/ folder to, that worked for me.
I have tried several things to clear browser cache while routing between pages.like cache: false , index.html?x=1 ,target="_self" ,disableCache: true, in $routeProvider as well.but any of this didn't worked for me.finaly $window.location.reload(); worked.but i do not want reload the page every time when routing.is there any perfect solution for route cache in AngulerJs?
scenario
In my header.html have ng-if="currentPath ==='/store'".it's check current path and display some styles regarding to store in header.html
header.html
<div class="container" ng-if="currentPath ==='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
<ul class="col-xs-4 icons">
<li ><i class="fa"></i>{{user.email}}</li>
<li> <span ng-show="cart_size > 0" class="count">{{cart_size}}</span></li>
</ul>
<--some styles for store.......-->
</div>
<div class="container" ng-if="currentPath !=='/store'">
<div class="col-xs-8 buttons" >
<a class="brand" href="#" target="_self"><img src="img/logo.png" /></a>
<a class="btns" href="#Store" target="_self">Store</a>
</div>
</div>
current issue
when i go into store page i have to refresh browser to display store styles in header.
after that go into another page,store styles still display in header.then i have to refresh again.
how to solve this issue?
You may try
angular.element('html[manifest=saveappoffline.appcache]').attr('content', '');
where you want to disable cache.
The manifest attribute specifies the location of the document's cache manifest.
As per w3schools.com
HTML5 introduces application cache, which means that a web application
is cached, and accessible without an internet connection.
Application cache gives an application three advantages:
Offline browsing - users can use the application when they're offline
Speed - cached resources load faster
Reduced server load - the browser will only download updated/changed resources from the server
The manifest attribute should be included on every page of your web
application that you want cached.
The manifest file is a simple text file that lists the resources the
browser should cache for offline access.
To learn more about how to create the manifest file, please read our
HTML5 Application Cache chapter.
Another solution that you can try is add following snippet on your angular apps header so that your page will never be cached.
<meta http-equiv='cache-control' content='no-cache'>
<meta http-equiv='expires' content='0'>
<meta http-equiv='pragma' content='no-cache'>
So I am using a JSON that returns a lot of data about the user including pictures. The problem I am facing is that I believe the relative path to the images folder is correct however for some reason it is saying in ng-source="relativePath" instead of the image. The only conclusion I can come to is either the path is wrong or there is some sort of import I must do for the images to be used in the project.
<div ng-repeat="results in userInfo.images">
<figure class="img">
<img data-ng-source="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
</figure>
</div>
I have tried source, ng-source, and data-ng-source. When I view in console and on the html for image src it shows the relative path /images/profilePicture.png.
My project has the following structure:
Repositry Name
app
css
home
home.module.js
home.tpl.html
images
profilePicture.png
js
resources
app.js
index.html
Using best practices the index.htlm is the container for the single page application. We are using the home.tpl.html page that is injected into the index.html container page.
I have tried switching the path to go directly from index.html -> /images/profilePicture.png as well as from home.tpl.html -> ../images/profilePicture.png.
I could not find any posts relevant to my situation but I believe perhaps you need an app.use or some sort of injection method to add the folder of images to be able to be used?
Note: I am not sure if this is helpful however when I run grunt build instead of serve I check the dist folder and the image folder does in fact have all of the images.
Change your <img data-ng-source declaration to just use ng-src:
<img ng-src="{{results.imageUrl}}" ng-alt="{{results.name}}" ng-title="{{results.name}}" />
More details at w3schools: ng-src
I have downloaded a MP4 video for testing purposes but I am not able to watch it even after adding the crosswalk plugin. This is what I get:
Cannot GET /media/big_buck_bunny.mp4
This is my code, which is running fine for a youtube hosted video:
<div class="card">
<ion-item>
<div class="video-container">
<iframe ng-src="media/big_buck_bunny.mp4" frameborder="0" width="560" height="315"></iframe>
</div>
</ion-item>
</div>
Test video was downloaded from here:
http://www.quirksmode.org/html5/tests/video.html
And this is the tutorial I have followed:
https://www.thepolyglotdeveloper.com/2015/01/embed-video-ios-android-ionicframework-app/
EDIT: It seems I was placing videos in the wrong directory (not sandboxed). Nevertheless, it now complains about broken or corrupt file (message is in spanish so I don't know if translation is correct).
Finally I managed to do it using the "video" tag and tested it on different Android (which seems to be the problematic plattform) and everything works fine:
<video width="100%" autoplay="autoplay" controls style="margin-top: 50px; margin-bottom: 20px;">
<source src="media/sample.mp4" type="video/mp4">
<p>Your browser does not support H.264/MP4.</p>
I have a simple html and on that page i am trying to include some other html page for user detail. but some how the page is not being included.
On index page i have following code
<form>
<input type="Search" placeHolder="Enter Name" ng-model="user"/><br>
<input type="Button" value="Search" ng-click="Search()"/>
<div ng-include src="'userDetail.html'">
</div>
</form>
I have tried following.
<ng-include src="'userDetail.html'"></ng-include>
<div ng-include="'userDetail.html'"></div>
<div ng-include src="'userDetail.html'"></div>
The error code I am getting is
Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
Please see attached screenshot for further details.
The reason for the error is right in its description. You need to run your app in any of the listed protocols (for local development that's http or https 99,9% of the time). Instead you are running it as a file on the disk (notice the file:// in your URL).
You must use a local HTTP server (like Apache or IIS) or use a IDE with build-in server (I recommend Brackets for its great preview function) to serve your content to be able to properly test the application locally.