How to make span look like 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.

a `span` element does not have a `src` attribute in HTML that is valid. But using javascript you could do something with it — Jaromanda X, Mar 22 '18 at 05:47
What about this https://stackoverflow.com/questions/3793090/html-is-there-any-way-to-show-images-in-a-textarea ? — DanilGholtsman, Mar 22 '18 at 05:48
On twitter they are using `data` tags not `src`. `data-pictograph-image="https://abs.twimg.com/emoji/v2/72x72/1f62c.png"` — Runtime Terror, Mar 22 '18 at 05:49

score 2 · Answer 1 · answered Mar 22 '18 at 05:51

2

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>

answered Mar 22 '18 at 05:51

brk

48,835
10
56
78

Thank you for responce @brk. I edited the question. There are more details in edited part. What we can do in this case.. Any help appriciated. – Mustkeem K Mar 22 '18 at 07:17

Asons · Answer 2 · 2018-03-22T11:14:02.657

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 &emsp; and/or a custom font.

score 0 · Answer 3 · answered Mar 22 '18 at 05:54

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>

How to make span look like img?

3 Answers3