I'm trying to set the background image of a div dynamically using Angular 6...
But for some reason no matter what I do, It seems I can't make the image to render.
The images are being served from a local SimpleHTTPServer using python.
HTML:
<a *ngFor="let movie of movies">
<div [style.background-image]="movie.image">
{{movie.name}}
</div>
</a>
Component:
getMovies() : void {
this.movieService.getMovies().subscribe(movies => this.movies = movies.map(movie => {
movie.image = this.sanitizer.bypassSecurityTrustStyle(`url(${movie.image})`);
return movie;
}));
}
I've tried also using the sanitizer with no success... And i'm not getting any errors.
You can use like this:
<a *ngFor="let movie of movies">
<div [ngStyle]="{'background-image': 'url(' + movie.image + ')'}"> {{movie.name}}</div>
</a>
or
[style.backgroundImage]="'url('+ movie.image +')'"
Updated:
You should also mention height and width in div as mentioned by user184994 in comment section like this:
<div [ngStyle]="{backgroundImage: 'url(' + movie.image + ')', width: '200px', height: '150px'}"></div>
Make sure the url is URI Encoded.
In JS: encodeURI(url)
Related
I have two different projects (PWA and a webpage):
<img [src]="fileFirebaseUrl" class="image">
<div [ngStyle]="{'background-image': 'url(' + imageURL + ')'}">
Some images are not displaying correctly, when I inspect the html I can't find any background properties set. I have tried with svg, jpeg and png.
Some images work when I transform them to another format, or when I export a new image with another format.
Background image is not same as image tag. So it's repeated by default and position is not correct. So you should do like the following:
<div [ngStyle]="{'background': 'url(' + imageURL + ') no-repeat 0 0'}"></div>
No background-image, use background for all-in-one styling. Otherwise, you can use background-repeat, background-position, background-size etc separately.
I solved this with this function (trim is for possible linebreaks)
getCssUrl(url: string) {
if (url) {
return 'url(\'' + url.trim() + '\')';
}
}
As you can see , the images are shown correctly in the screen :
but when i try to print this container using ngx-print it's not displaying correctly :
Very important : I have no control over the images because they come from the back-end.
HTML :
<div class="hover-div">
<button mat-button class="title-div" printSectionId="card-container"
printTitle="professionalcard" [useExistingCss]="true" ngxPrint>
<div fxLayout="row">
<mat-icon class="preview-icon">print</mat-icon>
<div>print</div>
</div>
</button>
</div>
HTML of images :
<div class="simple-image" *ngIf="cardModel[r.content].value">
<img [src]="cardModel[r.content].value"
class="image-holder1">
</div>
Here is the result when i inspect the img in the page :
and this one , when i inspect the page viewer when printing :
i've noticed that in the last one , the link is not the right one , he is adding the directory of the page that i'm printing from , so how to fix this ?
According to this answer and this GitHub issue comment, you have to use absolute path for the image.
So, in your case, I think that something like this should work:
<img [src]="sanitizer.bypassSecurityTrustUrl('/' + cardModel[r.content].value)" />
import { DomSanitizer } from "#angular/platform-browser";
export class AppComponent {
constructor(private sanitizer: DomSanitizer) {}
}
you can add let window.location.origin to make it an absolute path , then you'll not have this problem
I am trying to concatenate a static path which will be static and a dynamic path which is the path of the image, into image URL I am getting syntax error whenever I add + between the paths i have tried this
<div *ngFor="let cat of Cat" class="cus-col" style="background-image: url( 'Static Image Url' '+ Dynamic Image Url' ) ">}
<div class="cus-text">
<h4>{{cat.name}}</h4>
</div>
</div>
Since you are using Ionic, you should use Angular NgStyle directive to set an elements style.
This example sets the background-image of a div with a dynamic url:
<div [ngStyle]="{'background-image': 'url(' + dynamicVariable + ')'}"></<div>
This example sets the background-image of a div with a static and dynamic url:
<div [ngStyle]="{'background-image': 'url(https://www.example.com/images/' + dynamicVariable + ')'}"></<div>
You can learn more about it here:
https://codecraft.tv/courses/angular/built-in-directives/ngstyle-and-ngclass/
Here i want to set placehoder image and for that i use commonurl path (this.commonUrlObj.commonUrl) instead of (http://localhost:3000) so how to set image in background-image using commonurl in angular 6?
category.component.html
<img [src]="url" style="height: 400px;width: 400px" [ngStyle]="{'background-image': getUrl()}">
category.component.ts
getUrl(){
return "url('this.commonUrlObj.commonUrl/placeholder.jpg')";
}
common-class.ts
export class CommonClass {
constructor(public commonUrl : string = 'http://localhost:3000'){};
}
getUrl(){
return "url('"+this.commonUrlObj.commonUrl+"'/placeholder.jpg')";
}
Maybe I didn't understand your problem but is this what you wanted to do ?
getUrl(){
return `url('${this.commonUrlObj.commonUrl}/placeholder.jpg')`;
}
You can't have an background image for an image. What you can do is wrap a div and give it an background:
getUrl(){
return "url('"+this.commonUrlObj.commonUrl+"'/placeholder.jpg')";
}
<div [ngStyle]="{'background-image': getUrl()}>
<img [src]="url" style="height: 400px;width: 400px">
</div>
As per docs in Angular.io you can give ngStyle an ObjExp. Like this.
TS
// Not in the question but don't use a constructor to define vars
private commonUrl: string = 'localhost:3000'; // Could have this as an env variable
getBackground() {
return {'background-image': `url(${this.commonUrl}/placeholder.png)`};
}
HTML
<div [ngStyle]="getBackground()"></div>
I have an image and when its clicked I want to show some html ( a div with some text and buttons). I know I can use the html config in a window or panel but is it possible to show the element without it being encapsulated in a component?
Here is the code for the image and click handler:
{
xtype:"image",
src:"/blah/helpicon.png",
listeners:{
render: function (c) {
c.getEl().on('click', function(e) {
//show html here, targeted on image icon
}, c);
}
}
}
Here is the html I want to show. All it is really is a fancy tooltip, thats all. And since its a tooltip i dont want to encapsulate it in a window:
<div id="test" class="hopscotch-bubble-container" style="width: 280px; padding: 15px;"><span class="hopscotch-bubble-number">1</span>
<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>
<div class="hopscotch-content">Step 1 Instructions here.</div>
</div>
<div class="hopscotch-actions">
<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>
<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>
</div>
thanks.
How about making your own Component with your custom html?
Ext.define('mycomponent', {
extend: 'Ext.Component',
cls: 'hopscotch-bubble-container',
width: 280,
padding: 15,
id: 'test',
html: [
'<span class="hopscotch-bubble-number">1</span>',
'<div class="hopscotch-bubble-content"><h3 class="hopscotch-title">Step 1</h3>',
'<div class="hopscotch-content">Step 1 Instructions here.</div>',
'</div>',
'<div class="hopscotch-actions">',
'<button id="hopscotch-prev" class="hopscotch-nav-button prev hide">Back</button>',
'<a class="hopscotch-bubble-close" href="#" title="Close">Close</a>'
]
});
By default a component will use a div to render your element, so by applying the outer html attributes to the component (cls, width, padding, and id) it will generate the outer most div correctly. The inner html is just passed through the html config. Now you can manage your component without having to deal with the html elements directly.
Here is a fiddle with an overly simple example of adding the new component to a container.