Vue: Img tag automatically adds an end tag

Created on 25 Aug 2017  ·  6Comments  ·  Source: vuejs/vue

Version

2.4.2

Reproduction link

https://sven-ybj.github.io/index.html

Steps to reproduce

<div id="app">
    use Vue
    <div>
        <img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png" />
        <p>Become a sub tag of img</p>
    </div>
</div>

What is expected?

<div id="app">
    use Vue
    <div>
        <img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png" />
        <p>Become a sub tag of img</p>
    </div>
</div>

What is actually happening?

<div id="app">
    use Vue
    <div>
        <img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png">
            <p>Become a sub tag of img</p>
        </img>
    </div>
</div>

非常简单的代码, 见https://sven-ybj.github.io/index.html

Most helpful comment

Okay, found it. Your vue.js file is not an original vue.js file. Someone changed it.

Your file:

var isHTMLTag = makeMap(
  'html,body,base,head,link,meta,style,title,' +
  'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
  'div,dd,dl,dt,figcaption,figure,picture,hr,image,li,main,ol,p,pre,ul,' +

Note that this contains image, not img

The real file:

https://github.com/vuejs/vue/blob/dev/dist/vue.js#L4784

This contains img, as expected.

If you did this, nice try for a joke. ;)

If someone did this to you, find them and slap them :-P

Sidenote: I would suggest not to use this file at all, there could be mailicious code in there.

All 6 comments

HTML 5 doesn't allow self-closing tags.

<!-- wrong -->
<img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png" />
<!-- right -->
<img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png">

@LinusBorg
I modified <img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png" /> to <img src="https://assets-cdn.github.com/images/modules/site/universe-logo.png">,But still error .
see https://sven-ybj.github.io/index.html

Hm, that's super-weird. Because here it works normally: https://jsfiddle.net/Linusborg/c1ubzLm3/

No idea what this could be ...

...except that `<script> elements should not appear after </body> - they belong just before it. But that can hardly be related.

Okay, found it. Your vue.js file is not an original vue.js file. Someone changed it.

Your file:

var isHTMLTag = makeMap(
  'html,body,base,head,link,meta,style,title,' +
  'address,article,aside,footer,header,h1,h2,h3,h4,h5,h6,hgroup,nav,section,' +
  'div,dd,dl,dt,figcaption,figure,picture,hr,image,li,main,ol,p,pre,ul,' +

Note that this contains image, not img

The real file:

https://github.com/vuejs/vue/blob/dev/dist/vue.js#L4784

This contains img, as expected.

If you did this, nice try for a joke. ;)

If someone did this to you, find them and slap them :-P

Sidenote: I would suggest not to use this file at all, there could be mailicious code in there.

If someone did this to you, find them and slap them :-P

Don't, if that someone is your girlfriend.

@LinusBorg Thank you very much, I checked the svn record, really was modified,But did not tell me.

Was this page helpful?
0 / 5 - 0 ratings