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/
Related
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?
Is there any way how to replace the path location using span or etc. that comes from the Jquery, or is there any shorcut in Django?, Currently as you can see I'm trying to override the path that comes from my jquery src="/media/<span id=image></span>". Is there any other way to pass the path image that comes from jquery into the img src?. It would be great if anybody could figure out where I am doing something wrong. thank you so much in advance
Jquery
$(document).on('click', 'a[data-role=show_scanned]', function(){
let csrf = $('input[name=csrfmiddlewaretoken]').val();
var path = $(this).attr('id'); #Image path example: image.jpg
var assign = $("#image").html(path);
$("#scanned_show").modal('show');
});
html retrieve
<img class="card-img img-fluid mb-1" src="/media/<span id=image></span>" alt="Card image cap" style="width: 900px;height: 600px;">
The line below can get the text of a span
$("#image").text()
You can then assign this to the src attribute of the img tag:
$("#imageDisplay").attr("src", $("#image").text() );
Demo:
// Add click event
$("#load").click(function() {
// Add text from span to src attribute of img
$("#imageDisplay").attr("src", $("#image").text());
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span id=image>https://via.placeholder.com/150</span>
<button id="load">Load Image</button>
<img id="imageDisplay">
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() + '\')';
}
}
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 want to add a DOM dynamic ID into an image url. The current img src url has values, but I want to insert values through variables DOM objects.
Movie.Imdb is a variable that I want the img src to dynamically render.
<div id=imdb style="visibility: hidden;">{{movie.id}}</div>
<div src="http://img.omdbapi.com/?i=tt3896198&h=600" ></div>
I want the image src url to be rendered as:
http://img.omdbapi.com/?i=+"imdb"+&h=600
So that it can be dynamic.
Try to use of append() and attr() jQuery
Stack Snippet
var imageUrl = $("#imageUrl").attr("src");
$(".wrapper").append("<img src=" + imageUrl + ">")
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div id="imageUrl" src="http://img.omdbapi.com/?i=tt3896198&h=600&apikey=6c3a2d45"></div>
</div>
<div src="http://img.omdbapi.com/?i="+movie.id+"&h=600" ></div>
This should work.