0

We are creating image tag from the programming in Sitecore 9.1.1. Using the below code.

var image = new MediaItem(imageField.MediaItem);
                    src = StringUtil.EnsurePrefix('/', MediaManager.GetMediaUrl(image));
                    string alt = image.Alt;
                    string imgTag = String.Format(@"src={0} alt={1}", src,alt);
                    model.Image = imgTag;

Adding imgTag in view

<img @Model.Image />

However , when we add single sting in Alt then it shows correctly but when we try to add string with space then it is showing like this after inspecting the image on the browser

This output is with single string

<img src="/sitecore/shell/-/media/Project/download.jpg" alt="Image" />

When we add string with space in Alt text in image then showing the below output

<img src="/sitecore/shell/-/media/Project/download.jpg" alt="Image" text/>

Here alt text is "Image text"

1
  • 1
    why would you try to generate an image tag in this way? Just use the field renderer, it works, and includes the alt text, and doesn't have issues like this. It will also be editable in the experience editor...
    – Richard Seal
    Sep 19, 2021 at 22:45

4 Answers 4

0

It looks like a string formatting issue, you need to add single quotes for the string format, try to use below sample code-

string imgTag = String.Format(@"src='{0}' alt='{1}'", src,alt);

The above code has single quotes('{1}') for src and alt variables.

1
  • After adding this, this is showing this result <img src="'/sitecore/shell/-/media/downloaddata-image---Copy.png'" alt="'Image" text&#39;="">
    – Ashu
    Sep 19, 2021 at 9:52
0

Why do you need image properties in this way instead you can use @Html.Sitecore.Field() html helper directly in your cshtml file and it will render the src with alt.

But still if you wanna try this way you can also try - string imgTag = $"src={src} alt={alt}";

Hope it will work for you.

0

I had the similar issue and tried to add Alt text with String.Format instead of passing its value to string datatype.

You can try this code :

var image = new MediaItem(imageField.MediaItem);
src = StringUtil.EnsurePrefix('/', MediaManager.GetMediaUrl(image));
string imgTag = String.Format(@"src={0} alt={1}", src, image.Alt);
model.Image = imgTag;

Hope this helps!!

0

To resolve the issue, you need to ensure that the alt attribute in the HTML output is properly enclosed within quotation marks. Currently, the alt attribute is being added without quotation marks, leading to unexpected behavior.

Modify the code snippet where you generate the imgTag to enclose the alt attribute within double quotes. Here's the corrected code:

var image = new MediaItem(imageField.MediaItem);
var src = StringUtil.EnsurePrefix('/', MediaManager.GetMediaUrl(image));
var alt = image.Alt;
string imgTag = String.Format(@"<img src=""{0}"" alt=""{1}"" />", src, alt);
model.Image = imgTag;

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.