Images in DatagridView inline in each html tag?

Ciao Tiziano, here is the explanation.

What you see with the base64 image is the local javascript image cache implemented in Wisej client side components. There is also a bit more complexity to this related to using images in cells because cells in a datagrid  are not components, they don’t exists as javascript components since they are rendered on demand when scrolling. So:

• Using DataGridViewImageCell.Value property sets the image using the css background-image:src() the same way using the Style.BackgroundImage uses the same css background-image:src(). Since the src attributes downloads the image directly from the server, when you use the URL (i.e. “resource.wx/Wisej.Ext.MaterialDesign/android-logo.svg”) the svg is returned unaltered and cached by the browser using the cache  settings returned by Wisej. If you look in the network tab you will see “(memory cache)” on a refresh (unless you disabled the cache in the tab).
• However, related the the point above, when adding the color property to the URL the svg image has to be first loaded from the server, then loaded as an xml document, then all the svg elements have to be traversed to replace the fill attribute but only if monochrome. This is all done in javascript and cached on the client using the URL with the color hashed as the key. That’s why you get the base64 in this case. It makes it a lot faster, as fast as the browser cached plain URL.

But:

• If you are instead setting the ImageSource property of say a Button you will always see the base64 because monochrome svg Images are always altered. Even if you don’t specify the color argument, Wisej uses the text color property of the widget to adapt the image. Therefore they are always downloaded and cached in the client after having been recolored.

Additionally, looking at the sample:

• No need to add cells to the row. Cells are created automatically.
• For DataGridViewImageColumn (and DataGridViewImageCell) no need to also create a DataGridViewStyle object, just set the Value.

Your sample could be

dataGridView1.Rows.Add(row1);
dataGridView1.Rows.Add(row2);
dataGridView1[0, 0].Value = “resource.wx/Wisej.Ext.MaterialDesign/android-logo.svg?color=#fca326”;
dataGridView1[0, 1].Value = “resource.wx/Wisej.Ext.MaterialDesign/android-logo.svg”;

Or

dataGridView1.SetValue(0, 0, “resource.wx/Wisej.Ext.MaterialDesign/android-logo.svg?color=#fca326”);
dataGridView1.SetValue(0, 1, “resource.wx/Wisej.Ext.MaterialDesign/android-logo.svg”);

Using SetValue() prevents the forced creation of a row when the grid is data bound.

HTH

First of all, thank you for your help.
I attach the project, and I think I understand one more detail.
In the project I load a DataGridView with two rows. The first column will contain the images whose render of our discussion.

The first row has an image with the color changed ( directive ?color=#…).
“resource.wx/DG.Ext.Font/lock.svg?color=#fca326”

The second row has a natural unmanipulated svg image (black)
“resource.wx/DG.Ext.Font/fax.svg”

It appears that color modification excludes from simple cashing.

In fact, by pressing F12 and hovering over the respective images, the first one is inline with many fonts, the second one has been downloaded to the browser’s source folder.
In fact, going to “Sources” and expanding the folders in the subfolder of “localhost:5000” > “resource.wx > DG.Ext.Font” we find the image of the second row of the table “fax.svg” (see the attachment Screenshot.png)

I wanted to ask you if you think the problem doesn’t exist, so should I ignore the inline of the first immegine because the browser will take care of it or should I pose the problem in pages where colored .svg’s are used to save having to load them in the resource file.

Bests Regards

Tiziano

We don’t produce any HTML. The html you see is Chrome’s representation of the DOM. Base64 sources are used routinely by our local image caching system and improve performance by a lot. Wisej doesn’t assemble or concatenate HTML, it uses dom elements directly (through a shadow fast dom system). When you inspect the HTML chrome rebuilds the HTML representation. Otherwise our HTML is simply the empty Default.html page.

Can you attach a small runnable sample project so we can give you a better explanation on why the URL is used in one case and why the base64 is embedded in another?