I've got the following code in the HTML editor.
<div><img src="image.jpg"></div>

When I click publish a non-breaking space is added to the markup.
<div><img src="image.jpg">&nbsp;</div>

How can I stop SharePoint from inserting these tags?! Help!

Try

<div><img src="image.jpg" /></div>
  • I should have specified my markup, the IMG tag does have a closing "/" – Scott Weber May 24 '16 at 14:47
  • Unfortunately, that didn't change anything. – Scott Weber May 24 '16 at 14:47
  • Try this <img src='image.jpg'></img> – Amal Hashim May 24 '16 at 14:49
  • That gets changed to a single <img /> tag. – Scott Weber May 24 '16 at 14:51
  • Try adding an alt to the tag – Amal Hashim May 24 '16 at 14:52

A similar issue occurs when you use an h1 tag. SPD will add a &nbsp; after the opening tag. A workaround is to surround the text with a span tag. Try this for your issue--

<div><span><img src="image.jpg"></span></div>

With self closed image tag (XML prefers a closing tag.):

<div><span><img src="image.jpg"/></span></div>

SPD = POS editor.

  • This does not work either. It just adds the &nbsp; after the </span>. – Neil Monroe Nov 8 at 21:13
  • Can you try in a content editor web part? I just tried and the editor replaces <div><img src="image.jpg" /></div> to <div><img src="image.jpg" alt=""/></div>. So basically it just adds the alt tag. – Ahmad Zia Nov 9 at 0:30

I have found that this works most of the time.

If you add the non-breaking space entity (&#160;) before Sharepoint does, then you have a little more control over where it ends up.

If you save this HTML in the Sharepoint editor:

<div>
  <img src="myimage.jpg" alt="" />
</div>

it will get saved as:

<div>
  <img src="myimage.jpg" alt="" />&#160;
</div>

The only real way to make the space go away is to hide it by reducing the font size to 0 or programmatically remove them with script (ugly).

To hide the space, update the HTML in the editor to include the &#160; before Sharepoint does and it will leave it alone. Wrap your <img> tag in a span and set that to have no font size.

Updated HTML for the editor:

<div>
  <span class="text-zero"><img src="myimage.jpg" alt="" />&#160;</span>
</div>

The CSS for the class text-zero would be:

.text-zero {
  font-size: 0;
  line-height: 0;
  display: block;
}

If you don't add the &#160 in your HTML in the editor, it may end up adding it after the closing </span> tag.

I can't guarantee that this will work 100% of the time, because Sharepoint puts the non-breaking space characters after some images and not others, but it has worked in a lot of instances and seems more stable than some other solutions.

New contributor
Neil Monroe is a new contributor to this site. Take care in asking for clarification, commenting, and answering. Check out our Code of Conduct.

Your Answer

 
discard

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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