What would be the correct way to build a srcset-attribute with Thymeleaf using the standart url syntax #{/...} ?
Example:
<img th:src="#{/i/1000.jpg}" srcset="/i/1500.jpg 1500w, /i/2000.jpg 2000w" />
Nevermind, it was easier than expected and logical at the same time:
<img
th:src="#{/i/1000.jpg}"
th:attr="srcset=#{/i/1500.jpg} + ' 1500w, ' + #{/i/2000.jpg} + ' 2000w'"
/>
The correct way for building of srcset attribute in thymeleaf is as follows:
<img th:attr="srcset=|#{/img/image1x.png} 1x, #{/img/image2x.png} 2x, #{/img/image3x.png} 3x|" th:src="#{/img/image1x.png}" alt="My image description text" />
Related
I work use asp.net mvc5 in my project.
I try to display Image stored in my Shared folder in the project:
<img src="#Url.Content(~/Views/Shared/logo.png)" alt="" />
But I get this error on the fly:
Compiler Error Message: CS1525: Invalid expression term '/'
Any idea why I get the error above?
#Url.Content helper needs string as a parameter so you should write like this:
<img src="#Url.Content("~/Views/Shared/logo.png")" alt="" />
or you can use single brackets
<img src='#Url.Content("~/Views/Shared/logo.png")' alt='' />
I have a MVC view where I need to render something like this:
<img src="foo/#(Model.Id).jpg" />
The problem is that Razor thinks the dot in ".jpg" belongs to the previous statement and thus tells me that there are no such field or property called "jpg". How can I overcome this?
Try this version, this would probably work
Edited:
<img src=#("foo/" + Model.Id + ".jpg") /> <!-- Try this simplified version -->
Your example works fine for me and display correct html with ID in it foo/51.jpg. 51 is number from my model.
But just as another idea you can save it as local variable like this:
#{
string path = "foo/" + Model.Id + ".jpg";
}
<img src="#path" />
i have a file name that contains spaces: bw3 - Copy_1340627264571.jpg
and i use this name to load the image as follows:
<h:graphicImage value="/#{myBean.imageFolder}/#{image.name}" width="30" height="30" style="border:0;"/>
this is translated to:
<img width="30" height="30" style="border:0;" src="/MyAPP/image/bw3+-+Copy_1340627264571.jpg">
while if i tried to print the name in outputText, it's printed correctly:
<h:outputText value="#{image.name}"/>
this is translated to:
<span id="myForm:viewImagesTable:0:_t68">bw3 - Copy_1340627264571.jpg</span>
any ideas how to fix that ?
This seems to be a bug in <h:graphicImage>. Spaces in request URI should be URL-encoded as %20 using java.net.URI and spaces in request query string should be URL-encoded as + using java.net.URLEncoder. It seems that <h:graphicImage> encodes the entire URI using java.net.URLEncoder.
Better replace them yourself beforehand:
<h:graphicImage value="/#{myBean.imageFolder}/#{image.name.replace(' ', '%20')}" />
Or, much better, don't allow spaces in filenames at all. When it concerns uploaded files, replace them by _ or something before saving.
Note that this has nothing to do with EL as your question tagging suggest.
I'm new to MVC 3, I'm trying to add an Image to the _Layout.cshtml file.
I tried
<img runat="server" id="img_logo" alt="Logo" src="Content/Images/mailworks.png" />
no success. The logo only appear on some views. on others views for some reason the image is supposed to be in some other location - found it using firebug.
Try this:
<img id="img_logo" alt="Logo" src="#Url.Content("~/Content/Images/mailworks.png")" />
Use this:
<img src="#Url.Content("~/Content/Images/mailworks.png")"...
I found another quick solution : just append '/' at the beginning of the src's path.
I am storing the location of images in my database in an MVC application...but i am only storing part of the location. For example:
/headers/image1.jpg
/headers/image2.jpg
The images are actually stored in the following folder:
~/content/images/headers/image1.jpg
~/content/images/headers/image1.jpg
In my view, I want to do something like this:
<img src="#Url.Content("~/content/images") + Model.ImageUrl" />
How can I do this?
Just do it!
<img src="#Url.Content("~/content/images" + Model.ImageUrl)" />
UPDATE:
As of ASP.NET MVC 4 it is valid to use the tilde URLs directly in HTML as the Razor View Engine will parse the URLs. Like this:
<img src="~/content/images/#Model.ImageUrl" />
You can write extension method which combine your ImageUrl with configured path to content directory.
<img src="#Model.ImageUrl.ToRelative()" alt="#Model.ImageAlt" />
PS
Remember about alt tag. ;)