I'm using BatmanJs and Rails. I used carrierwave for uploading pictures and all worked fine. But, I am unable to show the image. The model has the attr photo.url which works fine. But I don't know how to bind a image tag.
I tried the following, with no result:
<img data-src="post.photo.url" />
<img data-bind="post.photo.url" />
But if I use
<span data-src="post.photo.url"></span>
it shows the url perfectly.
Kindly suggest how do i get it to work for img tag.
Very close! try data-bind-src. Actually, you can use data-bind-#{anything} to bind html attributes to keypaths.
Related
I have created a folder inside wwwroot, called Media. I'm trying to set a background image with css like this:
<body style='background-image: url("~/Media/background.png")'>
But the background does not appear.
However, if I try to put is as a image it works:
<img src="~/Media/background.png" />
So, how do I handle background images?
Try the following:
<body style="background-image: url(../Media/background.png)">
Maybe: try to use url of image instead of relative path.
In That case I suppose `https://yourdomain/media/background.png' could do the trick.
I'm currently using DYI app builder platform and they have a <>source code page. So I put in
<img src="URL.png"/>
And it worked! But when I tried to shrink the image (original image is width=256 height 256)
<img src="URL.png" Width="100" Height="100"/>
Nothing happens to the size of the image.
So I tried
<div style="width:100px;height:100px;overflow:hidden;" >
<img src="URL.png" width="100px" height="auto">
</div>
Which I picked up on StackOverflow.. But it doesn't work.
Please help. BTW I have no knowledge of coding so please do not skip a step assuming I would know it.
(When I apply the code and go back to the source code page width and height disappeared from the source code page except the bare bone Img src="URL")
Something in your program is overriding it or disabling it (filtering it away). If it is another css rule that is overriding your css, then you could try:
width:100px !important;height:100px !important;
if this doesn't work then apparently the css gets filtered out, you might check the program's settings if this behavior can be changed
Try to save the page, in the DYI app builder you're using.
I've been doing a little hacking with wordpress ..via the editor.
I'm placing svg images and I've installed the SVG Support plugin
https://wordpress.org/plugins/svg-support/
When I insert a regular image (a png file) the code looks like this:
<img class="alignnone wp-image-146 size-medium"
src="mydomain/2-300x246.png" alt="2" width="300" height="246" />
and then the theme I'm using scales it as the browser scales up and down, which is what I desire with the svg image.
When I insert an SVG file, it does not show up until I modify the code by taking out the first class tag and add a new class tag:
class="style-svg"
like this..
<img class="style-svg"
src="mydomain/convo_and_notes2.svg" alt="convo_and_notes" width="1" height="1" />
Maybe I need to use a different wordpress theme or modify the one I'm using.. but first I want to know is it possible to get the same responsive behavior from an SVG file (I'm guessing it is ...but how?)
The wordpress theme I'm using is Flat by YoArts if that's helpful information.
Sorry if this is not the right way to phrase this question.. I'm not sure what I'm doing so it's hard to know what to ask.
In a nutshell, I want the SVG files to behave like the bitmaps and would love some advice on how to do that.
The wordpress uploader adds
height="1" wudth="1"
remove that and add
width="300px"
or something like that.
also to keep the responsive behavior don't remove the
class=""alignnone wp-image-146 size-medium"
that's it. The height and width were causing the problem.
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'm working with client's CMS and it's adding images like this and i can't change this.
I tried IE7.js but it's not working
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1" />
Unless whatever code runs behind imagefolder dislikes additional, unknown arguments, you might be able to trick the IE hack into thinking it's a .png:
<img src="~/imagefolder/CF88B05B445A4D008806C8B3E2830679.png?w=400&h=300&as=1&dummy=.png" />