#4 Images with Unsafe URLs (Umlauts etc.)
Requirements
Resources
RazorBlade Fluent Tag API @Tag.Img().Src(...)
and Srcset(...)
v3
One of the magic bits of the Html5 tags is that they are smart. For example, url properties like
Note that it's
Src()
or Href()
will safely encode if they are not yet encoded.
This is super important for CMS solutions where the image file may easily contain umlaut characters or spaces. Note that it's
Srcset()
and not SrcSet
. For consistency, everything is always lower case.
Initial Code
The following code runs at the beginning and creates some variables/services used in the following samples.
Output

Output
<img src='/oqtane-tutorials/app/Tutorial-Razor/assets/blade/assets/tag-img/%C3%BCberschrift-small.png?name=%E6%94%B9%E5%96%84'>
Srcset
which allows high-density images: Output
#4 Images with Unsafe URLs (Umlauts etc.)
Source Code of this file
Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code
@inherits Custom.Hybrid.Razor14 @using ToSic.Razor.Blade; <!-- unimportant stuff, hidden --> <div @Sys.PageParts.InfoWrapper()> @Html.Partial("../shared/DefaultInfoSection.cshtml") <div @Sys.PageParts.InfoIntro()> <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Img().Src(...)</code> and <code>Srcset(...)</code> <em>v3</em></h2> <div> One of the magic bits of the Html5 tags is that they are smart. For example, url properties like <code>Src()</code> or <code>Href()</code> will safely encode if they are not yet encoded. This is super important for CMS solutions where the image file may easily contain umlaut characters or spaces. <br> <em>Note that it's <code>Srcset()</code> and not <code>SrcSet</code>. For consistency, everything is always lower case. </em> </div> </div> </div> @{ // demo of path with umlauts and japanese characters var kaizenUrl = "überschrift-small.png?name=改善"; var path = App.Path + "/blade/assets/tag-img/"; var kaizenFullPath = path + kaizenUrl; var kaizenFullHd = kaizenFullPath.Replace("small", "large"); } This file is called @kaizenUrl <br> @Tag.Img().Src(kaizenFullPath) <pre>@Tag.Img().Src(kaizenFullPath).ToString()</pre> And now the same thing with <code>Srcset</code> which allows high-density images: <br> @Tag.Img().Srcset(kaizenFullPath, 1).Srcset(kaizenFullHd, 2) @* Footer *@ @Html.Partial("../Shared/Layout/FooterWithSource.cshtml", new { Sys = Sys })