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() + '\')';
}
}
Related
I wanna pick the src attribute value on the HTML and pass it to the css/scss file in a variable to be able to just add it to the url() property:
<style>
img[src]{
background-image:url(attr(src));
}
</style>
And for every different img just grab their src value, add it inside the url property and make it the background image so I don't have to code a lot or code each single different image.
-
I've tried but does not work, i also tried using custom properties but i wanna confirm that there is no way to do this or a similar solution.
Thanks
No, you will need javascript to get the value attribute and use it as a value elsewhere
here a possible example with a css var(--var) so it can be easily reused:
let imgs = document.querySelectorAll('body img');
[...imgs].forEach((img) => {
img.setAttribute("style", "--bg: url(" + img.getAttribute('title') + ");");
});
img {
padding: 5em;
background: var(--bg) 0 0 / cover ;
box-shadow:inset 0 0 5em
}
<img src="https://picsum.photos/id/1020/200/300" title="https://picsum.photos/id/1020/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1015/200/300" title="https://picsum.photos/id/1015/200/300">
<img src="https://picsum.photos/id/1025/200/300" title="https://picsum.photos/id/1025/200/300">
<img src="https://picsum.photos/id/1050/200/300" title="https://picsum.photos/id/1050/200/300">
untill the full table turns green at https://developer.mozilla.org/en-US/docs/Web/CSS/attr()
I want to set a svg image as background image in my React project. However the code is not working. I have tried the following ways:
import log_bg from './Login background.svg'
useEffect(() => {
document.body.style.background = `url(${log_bg})`
}, [])
Method 2.
<div style = {{backgroundImage: `url(${log_bg})`}}>
TEXT
</div>
I have also tried using only background tag instead of backgroundImage. I have also tried background: log_bg [also backgroundImage: log_bg], but it also does not works. How to fix this?
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/
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)
I am using NgStyle to dynamically set the background image of a container in angular 4.
This site: Says the proper syntax is the following
[ngStyle]="{'background-image': venueobject.groupphoto[0]}">
or
[ngStyle]="{'background-image': 'venueobject.groupphoto[0]'}">
I also saw turning the whole thing into a string:
[ngStyle]="'background-image': 'url(' + 'venueobject.groupphoto[0]'+ ')'">
and
[ngStyle]="'background-image: url(' + venueobject.groupphoto[0] + ')'">
but I keep not getting it. The page is rendering so my html is not broken, but the image is not showing.
This is currently not yay and I am trying to make it yay.
Please help me make it yay
Hugs and kisses
You can try the following:
In your ts file:
import { DomSanitizer } from '#angular/platform-browser';
constructor(private sanitizer: DomSanitizer) { }
getBackgroundImg() {
// replace the path to your image here
const img = 'assets/img/wall.png';
const style = `background-image: url(${img})`;
// this is to bypass this warning 'WARNING: sanitizing unsafe style value background-image: url(assets/img/wall.png) (see http://g.co/ng/security#xss)'
return this.sanitizer.bypassSecurityTrustStyle(style);
}
In your html file:
<div [style]="getBackgroundImg()"></div>
You will also need to set the width and height of the div to see the image.