I am just starting with AngulerJs and I want to load a image from a sub-folder.
This is my controller code:.
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
This is the code in my index.html:
<img ng-src="{{img_source}}"/>
You can do like this
$scope.img_source = "../WebContent/Welcom2Iquote.gif";
if this your scope variable of the image path you can bind the image like below in your html using ng-src
<img ng-src="{{ img_source }}" />
Use the image tag as you used to place image for normal html images
<img ng-src="../assets/img/{{img_source}}" alt="img_source" title="img_source">
If you're using the angular-cli, you should have an assets folder in your solution.
Drop in the image you want to load, into this folder.
Now on the whatever-component.html page insert this line
<img src="assets/{{img_source}}" alt="img_source" title="img_source">
The {{}} requires you to define the img_source in the typescript file corresponding to the whatever-component.html file.
So define the the name of the picture over there:
public img_source: string = 'yourpicture.jpg';
Related
I want to dynamically resize an image map. I only found a solution for jQuery (https://github.com/stowball/jQuery-rwdImageMaps)
How can I realize this in Angular?
you can use https://github.com/davidjbradshaw/image-map-resizer
It works with javascript call :
sample
in HTML :
<img src="...." width="100%" usemap="#usaMap" (load)="imageResized();">
in TS :
declare function imageMapResize(): void;
#Component({...
})
...
imageResized() {
imageMapResize(); // Javascript function in imageMapResizer.min.js
}
Previous answer works, however, you have to download the imageMapResizer.min.js into the assets folder.
Then, you should import it in the index.html file like this:
<script src="./assets/imageMapResizer.min.js"></script>
I thought that the file should be imported in the angular.json file, but it didn't work ... index.html did the trick for me.
I've just finished a function that works, but I'm wondering if it's the best way.
My goal is to have the text in an h2.product-title add into both src paths of images and the href of a button to build out the complete path that matches what's on disk already—saving me time from manually linking assets. So when I duplicate a page and change out the text of the h2, the assets point to the right place.
Here is the html from the page:
<h2 class="product-title">Darth Vader</h2>
<img class="product-image" src="images/placeholder/preview-01.jpg">
<img class="product-image" src="images/placeholder/preview-02.jpg">
<img class="product-image" src="images/placeholder/preview-03.jpg">
<img class="product-image" src="images/placeholder/preview-04.jpg">
<p><a class="product-download" href="#">Download</a>
Inside "images", I have a "placeholder" folder and also a "products" folder. I have each product name in its own folder inside products. The placeholder folder is just for me to see temp images while building.
The folder structure is like this:
images/products/darth-vader/preview-01.jpg, ...
images/products/bespin-luke-skywalker/preview-01.jpg, ...
images/products/jabba-tha-hutt/preview-01.jpg, ...
And my javascript:
$(document).foundation();
$(function() {
var str = $(".product-title").text();
str = str.replace(/\s+/g, "-").toLowerCase();
$(".product-image").attr("src",function(index,attr){
return attr.replace("images/placeholder", "images/products/" + str );
});
$(".product-download").attr("href", "images/products/" + str + "/download.zip");
});
Is this the right way to go about this? The downside to this is that I briefly see the placeholder image load before the actual image changed via js.
PS: I'm using a system that doesn't allow server-side scripting, so Javascript is the only thing I can do to modify the DOM.
I am writing my code in (root-directory)/imports/ui/body.html and i have an img src tag there which is not working. After searching on the internet found out that we have to store assets in the public folder.After doing so , still i cannot get the image to be displayed.But when i use the image tag in client/main.html i am able to see the image , but not when i add the img src in body.html in imports/ui.
i have tried:
< img src="../../img.jpg" >
< img src="../../client/img.jpg" >
If path for your images are root/app/public/img.jpg and root/app/public/client/img.jpg, the use this to access them:
<img src="/img.jpg" />
<img src="/client/img.jpg" />
Create a folder named "public" in the root directory of your app. Paths in your code will use this folder as the root directory. So putting your image file directly in "public" and accessing it using '/img.jpg' should work.
I would like save with a button a generated picture. I see the fastest solution is JavaScript, probably JQuery or any framework.
My application generate a img label, for example:
<img src = "data:image/png;base64,iVBORw0KGgo...(it's very long)"/>
The many problem is the src attribute because change for my application, first I need catch the URL of this.
Thank you very much!
You can use the download attribute in HTML. If the img src is automatically generated, you could use the script below to put it in the href:
$('#save').prop('href', $('img').prop('src'));
<img src="http://blog.grio.com/wp-content/uploads/2012/09/stackoverflow.png"/><br/>
<a id='save' download>Save</a>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
i have image url in this format in database
http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg::
i am trying to pass image url to a angular controllers method like this
<img src="sizeImg(comment.pictures)">
and i have written a function to process the url like this
$scope.sizeImg = function(pictures){
return 'http://www.nobrok.com/roomrent1/public/uploads/5269/b4a3263f52c1c4725096ee299fa2c64051cb9b4d.jpg';
}
but the function is not working
You can't pass javascript directly into into src, and the angular documentation for ngSrc mentions "Using Angular markup like {{hash}} in a src attribute doesn't work right now" Try ng-src.
<img ng-src="{{ sizeImg(comment.pictures) }}">
https://docs.angularjs.org/api/ng/directive/ngSrc
Codepen example: http://codepen.io/anon/pen/gfvIr