in html image and gif are set as same way. so i use same way in thymeleaf
In thymeleaf the image set as
<img th:attr="src=#{${ball.png}} , title=#{background}, alt=#{background}" style="width: 150px; height: 150px;" />
same as the gif image set as
<img th:attr="src=#{${run.gif}} , title=#{background}, alt=#{background}" style="width: 150px; height: 150px;" />
the image will show there but gif image not shows there
i don't know why this happening.
if you know the answer please share here.
#{${run.gif}} tries to URL rewrite with the property gif of an attribute run, which I doubt there is.
You should do #{/run.gif} if you want to refer to the image relatively to your context.
Documentation: Thymeleaf URL Syntax
Related
My HTML code is not displaying the image. I have tried a lot of times.
<img style="width: 200px; height: 200px;" src="../static/aircondition.jpg" alt="Air Condition">
Output
Please check if your provided src directory is correct or not
I am trying to setup an auto-response email for our business that will display our business logo image. Our mail server is hosted on HostGator and I'm using the cPanel auto-responder setup to create this message. I am using html using img tag to insert the image, which is loading fine, however the problem I'm running into is that below the image the email prints out the url of the image.
I am wanting to prevent the url from showing up. I assume this is an issue with HTML/CSS in the HostGator side of things but don't know where to find it to change it, hoping there is an easier inline CSS formatting that can be done to hide the href url?
The code I am utilizing currently:
<div>
<img src="http://www.centralmophysicians.com/wp-content/uploads/2014/06/LogowithBorder2012color1.jpg" alt="Central Missouri Physicians for Women" style="width:179px;height:228px" />
</div>
Thanks for the help!!
The alternative would be to use the CSS background or background-image attribute as you can see below.
.image {
background-image: url("http://www.centralmophysicians.com/wp-content/uploads/2014/06/LogowithBorder2012color1.jpg");
width: 179px;
height: 228px;
}
<div>
<img class="image" alt="Central Missouri Physicians for Women"/>
</div>
CSS
img {
width: 300px;
height: 300px;
}
HTML
<img src="http://images.xxxxxxx.co.uk/content/icon.png" alt="xxxxxxxxx" />
I get the same error in page speed
Specify image dimensions
The following image(s) are missing width and/or height attributes.
http://images.xxxxxxxxxx.co.uk/content/icon.png (Dimensions: 67 x 75)
there is a solution using .htaccess or jQuery ?
What's wrong with adding them to the image tag:
<img src="http://images.xxxxxxx.co.uk/content/icon.png" width="67px" height="75px" alt="xxxxxxxxx" />
You can't do what you want with JQuery because Search engines / PageSpeed won't render javascript and in turn it won't do anything for crawlers.
This is the same for CSS, the crawler (which is the purpose of the optimisation through PageSpeed) won't run through the CSS so if it's for SEO, CSS won't do either.
having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
I have 3 different sizes for the same image.
Can I achieve something like the following:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg?small'></img>
<img src='/path/to/image.jpg?large'></img>
I have tried the above but it instead shows image.jpg
The browser doesn't understand what you're trying to do. Why not append the size to the end of the image, like so:
<img src='/path/to/image.jpg></img>
<img src='/path/to/image.jpg_small></img>
<img src='/path/to/image.jpg_large></img>
I would suggest to keep the same image and add some css style to each one, instead of calling the same image 3 times from it path something like:
html code
<div>
<img src="/path/image.jpg" width="100" height="100">
</div>
<div id="scale-up" style="height: 230px">
<img src="/path/image.jpg">
</div>
<div id="scale-down" style="height: 57px">
<img src="/path/image.jpg">
css code
img {
vertical-align: middle;
height: 100%;
}
#scale-up {
height: 230px;
}
#scale-down {
height: 57px;
}
If you want filenames to look like (on server):
fd11f91bb8361030bdc09d8b8ed4f88e?w=200&h=76&f=png
You need to url encode them when requesting to server. For example using http://meyerweb.com/eric/tools/dencoder/
So url encoded file will look like:
fd11f91bb8361030bdc09d8b8ed4f88e%3Fw%3D200%26h%3D76%26f%3Dpng
So in your case it should be:
<img src='/path/to/image.jpg'></img>
<img src='/path/to/image.jpg%3Fsmall'></img>
<img src='/path/to/image.jpg%3Flarge'></img>
Like #Leo mentioned, using html-tags (or css) is much easier here than a url-based approach. (which would require server logic)
The html-tag resizing would look like:
<img src="/path/to/image.jpg" width="100" height="100">
You mention that you dislike how that might increase the bandwidth usage. This shouldn't be a problem as long as your website uses caching on the images. (it will only download the image once then, and just resize the same image locally for the different tags)
I would suggest
<img src="/path/to/image.jpg"></img>
<img src="/path/to/image_small.jpg"></img>
<img src="/path/to/image_large.jpg"></img>
to keep the file extension.