Here's the issue, I want to pickup an image from my backend website.image_url(employee,'image_medium' )
It works when I use it with <img t-att-src="website.image_url(employee,'image_medium' )" />
But as soon as I try to use as CSS attibute, it doesn't work. How can I solve the issue?
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
Try this:
<div style="background-image: url('"website.image_url(employee, 'image_medium')"');">
The single quotes withing you call to get the image I think are what is breaking the css as it thinks the first is ending the url.
url also doesn't actually need single quotes, so you can also try:
<div style="background-image: url("website.image_url(employee, 'image_medium')");">
Related
I'm having a very weird problem with Ionic 3 (template binding I thing, specifically with styles) which has had me blocked these last days, without being able to find a solution or even knowing what can be causing this. I hope anybody can help me to troubleshoot and fix whatever is going on.
I'm working on an application in Ionic 3. In one of its pages, there is a list containing some text and images as background-images. There is where my problem appears. Images are not showing, and I can't find a way to make them work, although I have tried all the possible solutions I have read all over the internet.
Images are in the local assets folder. The path to the image comes from an array of objects which has an 'image' property, containing the path (assets/imgs...). I am sure the path is correct because if I use with [src]="coto.image" (single element and his property, generated by an *ngFor) the image is displayed. For background-image binding I have tried using:
[style.backgroundImage]="'url(' + coto.image + ')'"
[ngStyle]="{'background-image': 'url(' + coto.image + ')'}"
style="background-image: url({{coto.image}})"
Note: absolute external URLs ARE working. For example:
[style.backgroundImage]="'url(https://example.com/image.jpg)'"
[ngStyle]="{'background-image': 'url(https://example.com/image.jpg)'}"
style="background-image: url(https://example.com/image.jpg)"
BUT if I set a variable = "https://example.com/image.jpg" and bind it to the template, the same way I do with coto.image ([ngStyle]="{'background-image': 'url(imageVar)'}", it doesn't work too.
Another thing I have noticed is that if I set the route of the local image manually, (assets/imgs...; the same that should be passed by the coto.image item from the *ngFor), it is still not working, which seems the most weird for me.
Also tried the bypassSecurityTrustStyle from DOMSanitizer, with any results...
<div class="image" [ngStyle]="{'background-image': 'url(' + coto.image + ')', 'min-height': '180px'}">
<!-- <div class="image" [style.minHeight.px]='180' [style.backgroundImage]='"url(" + coto.image + ")"'> -->
<!-- <div class="image" style="background-image: url({{ coto.image }})"> -->
<!-- <img [src]="coto.image"> -->
</div>
If anyone has any knowledge on what's going on here I would be very grateful to read it, because the more I try to solve this more lost I feel I am.
Thank you very much!
*P.S: sorry for any grammar or spelling error I have made, English is not my mother tongue =)
Well, after an interesting amount of time, the light turned on. The problem was related to the name of the images ("image (1).jpg", "image (2).jpg"...). I removed the "()" and now it works perfectly. The problem seems to be related with some sanitizing that Ionic applies to HTML/styles/whatever in templates, which probably doesn't allow "()". It's strange because in Angular it does works... I hope this helps anybody who may have had the same problem.
I am currently developing a rails application. I am trying to show an image on background in html.erb file yet I cannot do this. I use following up code:
<header class="intro-header" style="background-image: <%= asset_path('home-bg.jpg') %>">
What's the mistake I did? Can anyone explain this?
Thanks,
Bartu
Make sure to wrap your background image in a url:
style="background-image: url(<%= asset_path('home-bg.jpg') %>)"
Links to background images must be wrapped in url(), otherwise your browser will not know where to go to get the image.
You forgot to put the url declaration in your background-image property. It should look like
<header class="intro-header" style="background-image: url(<%= asset_path('home-bg.jpg') %>)">
Otherwise, you're just including a raw url as the property.
I'm somewhat perplexed by this.
..
The page im working on is located in
www.gd-gaming.com/wordpress/
However, for the background image to show, instead of putting it in
www.gd-gaming.com/wordpress/images
I've had to put it in
www.gd-gaming.com/images
Now, When I visit an additional page from the one im working on, (www.gd-gaming.com/wordpress/breakout-canidates/)
That background image dissapears. I cant understand why, I use the same code on a vbulletin website and the background displays everywhere. If I firebug it, it tells me the image didnt load, meaning the path is incorrect. I'm not sure where to put it though.
For actual reference..
http://www.gd-gaming.com/wordpress
http://www.gd-gaming.com/wordpress/breakout-canidates/
Code: <div id="background">
<img class="background" src="images/bgmain.jpg">
</div>
use absolute:
<div id="background"> <img class="background" src="/images/bgmain.jpg"> </div>
instead of relative one
I've used url() in my project, but it is not showing the picture in IE 6? does IE6 not support url()? How should I solve the problem?
The code is as below:
<img class="avatar" style="background:url('./avatar.jpg') no-repeat scroll 5px 7px transparent;" />
Use background-image:
<img class="avatar" style="background-image:url('./avatar.jpg')" />
Also note that you had an extra ) at the end.
Also make sure that this is actually a problem with the background image. What happens if you set the background color? Do you see it then? It could be a layout problem that it causing it to not appear.
The entire tag looks wrong. I would do something like this:
<img class="avatar" style="background-image: url('./avatar.jpg');" alt="" />
I would also check that the path is correct.
-- Edit --
After testing, I've noticed that a path like './avatar.jpg' will never work. It's looking for a folder entitled . in the same directory as the file you've written the style in. Do you have a folder named .? I don't think so. It's an illegal directory name.
I work with views. A view manages the display of some text. I checked under REWRITE RESULTS the Trim this field to a maximul length-box and alsoo the Trim only a word-box and Add an eclips...-box.
Where the pages used to look like this:
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
<div class="test"></div>
now it's like this:
<div class="test"><div class="test"><div class="test"><div class="test"></div></div></div></div>
Is this a (known) Drupalbug or what am I doing wrong here?
Try toggeling "Strip HTML tags". It did work for me!
How many characters are you restricting the field to?
If it is trimming the closing 's from the field and trying to output
<div class="test"><div class="test"><div class="test"><div class="test">
Then it maybe that either Firefox is closing the divs by itself or it may be that the views trim function tries to tidy the HTML up before outputting it - and it has to guess where the divs should be closed and unfortunately for you, it's guessed wrong by closing them all at the end of string.
Your best option is to either get the view to strip the HTML before trimming, or display it untrimmed. Trimming HTML to a fixed length can cause all kinds of strange issues if you chop off the ends.