如何使跨度看起来像img？

Question

How can we make a span element as img element? More precisely how can we do this,

<span src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'></span>

I saw this concept in twitter message bar when we put emoji in textarea. Thank you for you time and concideration. Kindly have a look I would be greatful.

Edit-1

This question is not about using background image. Can we have other option like twitter people do. This is what I saw in twitter page.

<span class="RichEditor-pictographText" title="Smiling face with halo" aria-
label="Emoji: Smiling face with halo" data-pictograph-text="😇" data-
pictograph-image="https://abs.twimg.com/emoji/v2/72x72/1f607.png">&emsp;
</span>

And these lines make an image look like and there is no background image as well.

Answer 1

You can set it in a class background and add that class to the span

 .icon { background: url("https://abs.twimg.com/emoji/v2/72x72/1f607.png") no-repeat; width: 100px; display: inline-block; height: 100px; } 

 <span class='icon'></span> 

Answer 2

A span doesn't have an attribute where to assign an image, other than background-image using the style attribute, which won't size the span to the image's size (like an img does).

A possible workaround, using a custom attribute like data-src , could be to use a script and insertRule() , and add a pseudo class to the stylesheet.

 var span = document.querySelector('span[data-src]'); var src = span.dataset.src; document.styleSheets[0].insertRule('span[data-src]::before { content: url('+src+'); }', 0); 

 span { border: 1px dashed gray; display: inline-block; } 

 <span data-src='https://abs.twimg.com/emoji/v2/72x72/1f607.png'></span> 

---

Another possible way is to dynamically insert an img into the span .

---

When it comes to how Twitter does, I guess they use their custom attribute similar, for browsers (or readers) that simply doesn't support emoji's, like   and/or a custom font.

Answer 3

You can do something like this

 #abc { background:url(http://t2.gstatic.com/images?q=tbn:ANd9GcQCze-mfukcuvzKk7Ilj2zQ0CS6PbOkq7ZhRInnNd1Yz3TQzU4e&t=1) left top; width:50px; height:50px; display: block; float: left; } 

 <span id="abc" class="abc"> </span>