<img> tags don't like line breaks


  • 🚽 Regular

    Continuing the discussion from Sexy Avatar History:

    Code:

    <img src="/uploads/default/8148/b29438b39e0ed3b4.jpg" width="219"
    height="300">

    Note the line break before the height attribute.

    Expected:

    Actual:


    ## Also, code: <img src="/uploads/default/8148/b29438b39e0ed3b4.jpg">

    Result:

    DOM reported by Firefox is:

    <p>
      <img
     <br></br>
       src="/uploads/default/8148/b29438b39e0ed3b4.jpg">
    </p>

    That's the actual code in inspector. How that even works with a br inside an img is beyond me.


  • FoxDev

    Huh. i'd noticed that extra hight attribute when i posted it but didn't think much about it. thought i'd just goofed when i copy-pasted the avatar the second time (i grabbed the wrong one the first time)


  • Discourse touched me in a no-no place

    @Zecc said:

    DOM reported by Firefox is:

    <p>
    <img
    <br></br>
    src="/uploads/default/8148/b29438b39e0ed3b4.jpg">
    </p>

    That's the actual code in inspector. How that even works with a br inside an img is beyond me.

    Firefox adds stuff in. What's being sent is:

    <h2>Also, code:</h2>
    
    <p>&lt;img<br>   src="/uploads/default/8148/b29438b39e0ed3b4.jpg"&gt;</p>
    
    <h2>Result:</h2>
    
    <p><img>   src="/uploads/default/8148/b29438b39e0ed3b4.jpg"&gt;</p>
    

    Raw gives a hint as to why it's in there.


  • 🚽 Regular

    Yeah, DOM reported by Chrome is (picture because I can't simply paste it and trying to format what is pasted triggers other Discourse bugs):

    The actual source seems to be (like you said):

    <img>   src="/uploads/default/8148/b29438b39e0ed3b4.jpg"&gt;
    

    Why can't I no longer edit my previous post?


Log in to reply