I have images in a folder saved as the users name. I want to display a clickable image from the (name of user).png. Using AngularJS
This is wrong but this is what I mean, I know I cannot use src with a function in it:
{{currentUser.name}} //the function
<md-button ng-click="Popup()"><a><img src="{{currentUser.name}}.png " width="200" height="200"></a> </md-button>
currentUser is a function ?
you're using it as an object. share your javascript.
Try using ng-src instead of src. :)
Change the src by ng-src.
Checkout the manual about ng-src:
https://docs.angularjs.org/api/ng/directive/ngSrc
Related
I want to load img in ReactJS. But I can't put url img in require.
Note: const 'Photo' is url link of picture.
Any help will be appreciated..
Thanks.
This is the directory structure and 'photo' = "./upload/xxxxxxxxxx.jpg"
enter image description here
You can require with expression.
So, this should work:
<img src={require('./upload/' + fileName)} />
The first part inside require is directory and the second one is fileName e.g. my-image.png.
Or there are various other ways to handle dynamic requires: map, switch
I have 10 icons where each one for different types of alerts. I'm getting the type value from a service. I need to change the icon and style of text based on the type I'm getting from service. I'm using ng-src for changing the images.
<div ng-src="{{type=='0' : 'img1.png' : (type=='1' : 'img2.png' : ())}}"></div>
<div ng-class="{{class1: type=='1'}}">Some text</div>
Is there a better way to do this?
You can just set the icon img source in controller. Or even set the img source like:
$scope.iconSrc = "img" + type + ".png";
And use in template. Same login for class.
I have an AngularJS project and I am trying to show an image from local folder.
My folder hierarchy is like this:
--app(folder)
-----controllers(folder)
-----services(folder)
-----views(folder)
--------images(folder)
-----------image1.jpg
-----------image2.jpg
-----------image3.jpg
--------persons.html
--------departments.html
--index.html
I have in image address in personsController.js:
$scope.fooImageAddress='images/image1.jpg';
and in person.html:
<img ng-src="{{ fooImageAddress}}" alt="here should be an image"/>
And nothing shows, just alt message if img.
What can I do?
I've read this question, this and this, and tried suggestions, nevertheless there is no result.
You must change your address, relative to your index.html file
So I suppose app/views/images/image1.jpg
it is look like wrong path from a controller the path is different:
$scope.fooImageAddress='../views/images/image1.jpg';
if is was from person page , you was right.
why are you using "ng-src" and not src if is only one image but use like that
<img ng-src="{{'images/'+imageName+'.jpg'}}" alt="here should be an image"/>
$scope.imageName = image1;
Please try this one, "fooImageAddress" is a parameters.
<img src= "assets/images/{{fooImageAddress}}" />
I am trying to include a template and its not working.I have had trouble with includes every single time I try to use them. Is there something I am doing wrong?
views structure :
https://i.stack.imgur.com/yFeYs.png
UserList.html :
<p>
UserList
</p>
<div ng-include src="'../Partials/Paging.html'"></div>
update :
Paging : localhost/Administrator/App/Views/User/UserList.html
UserList : localhost/Administrator/App/Views/Partials/Paging.html
Index : localhost/Administrator/Index.html
Your include path starts on your index.html, since its loaded from there while running your SPA.
So your include path has to be relative to your index.html:
<div ng-include="'App/Views/Partials/Paging.html'"></div>
Try this
<div ng-include="'../Partials/Paging.html'"></div>
till if you will not get the src path might be wrong
Try
<div ng-include="'App/Views/Partials/Paging.html'"></div>
ng-include doesn't requires src parameter. If you still see any error please verify the path to Paging.html
Hi Um using angular for the first time to bind data to an img tag
Um using
<img data-ng-src="{{img.filePath}}" alt="{{img.vehicleId}}" style="width:10%" />
to show an image and the value of img.filePath as follows but it wont show up
D:\Country\Province\City\Images\A0001\2676199\aaaaaaaa-5a59-4bfb-b1ba-0faff297b7b1.jpg
There are no compile errors or any other errors in the code. Image is available in correct path.
Why is it not working ? Thank you in advance
From your index.html(main html from where you load all your js) track that file location.
if your index.html is in "D:\Country\"
then in ng-src ="Province/City/ImagesA0001/2676199/aaaaaaaa-5a59-4bfb-b1ba-0faff297b7b1.jpg"