Img tag - SVGs are replaced with JS

[jono-hayward]

❔ Question

When attempting to use SVGs inside HTML img tags, I've discovered that they're getting replaced in the output by JS files, which the browser obviously doesn't know how to handle in the context of an img tag.

Is this expected behaviour? Can I disable it?

🔦 Context

I'm using Parcel purely to bundle assets for a single HTML page - using the HTML page as an entry point. I'm not inlining anything or using JavaScript to render assets.

I'm using parcel-plugin-nunjucks to make my markup a bit more manageable.

💻 Code Sample

Source code:

{% set outlets = [
  { img: './img/media--60-minutes.png',     name: '60 Minutes' },
  { img: './img/media--aca.png',            name: 'A Current Affair' },
  { img: './img/media--4-corners.png',      name: '4 Corners' },
  { img: './img/media--7.30.png',           name: '7.30' },
  { img: './img/media--today-tonight.png',  name: 'Today Tonight' },
  { img: './img/media--the-project.png',    name: 'The Project' },
  { img: './img/media--huffpo.svg',         name: 'The Huffington Post' },
  { img: './img/media--al-jazeera.svg',     name: 'Al Jazeera' },
  { img: './img/media--sunrise.svg',        name: 'Sunrise' },
  { img: './img/media--today.png',          name: 'Today' },
  { img: './img/media--nyt.svg',            name: 'The New York Times' },
  { img: './img/media--cnn.svg',            name: 'CNN' },
  { img: './img/media--nbc.svg',            name: 'NBC' },
  { img: './img/media--ww.png',             name: 'Australian Women\'s Weekly' }
] %}

<section class="o-layout  o-layout--global-padding  c-media" id="media" data-as-seen-on>

  <h3>As seen on&hellip;</h3>

  <div class="c-media__list">
    <div class="c-media__wrapper">{% for o in outlets %}
      <img class="c-media__logo" src="{{ o.img }}" title="{{ o.name }}" alt="{{ o.name }} logo">
    {% endfor %}</div>
  </div>

</section>

Output markup

<section class="o-layout  o-layout--global-padding  c-media" id="media" data-as-seen-on="">

  <h3>As seen on&hellip;</h3>

  <div class="c-media__list">
    <div class="c-media__wrapper">
      <img class="c-media__logo" src="/media--60-minutes.1e919ef0.png" title="60 Minutes" alt="60 Minutes logo">
      <img class="c-media__logo" src="/media--aca.1d76d6fb.png" title="A Current Affair" alt="A Current Affair logo">
      <img class="c-media__logo" src="/media--4-corners.0dae8e1a.png" title="4 Corners" alt="4 Corners logo">
      <img class="c-media__logo" src="/media--7.30.8c07592a.png" title="7.30" alt="7.30 logo">
      <img class="c-media__logo" src="/media--today-tonight.cc1c3862.png" title="Today Tonight" alt="Today Tonight logo">
      <img class="c-media__logo" src="/media--the-project.aaca9717.png" title="The Project" alt="The Project logo">
      <img class="c-media__logo" src="/media--huffpo.f87b7c99.js" title="The Huffington Post" alt="The Huffington Post logo">
      <img class="c-media__logo" src="/media--al-jazeera.b2881a40.js" title="Al Jazeera" alt="Al Jazeera logo">
      <img class="c-media__logo" src="/media--sunrise.4e9cd8ed.js" title="Sunrise" alt="Sunrise logo">
      <img class="c-media__logo" src="/media--today.9be4191f.png" title="Today" alt="Today logo">
      <img class="c-media__logo" src="/media--nyt.bc8bb0d6.js" title="The New York Times" alt="The New York Times logo">
      <img class="c-media__logo" src="/media--cnn.5567929e.js" title="CNN" alt="CNN logo">
      <img class="c-media__logo" src="/media--nbc.dbcf932d.js" title="NBC" alt="NBC logo">
      <img class="c-media__logo" src="/media--ww.f392b751.png" title="Australian Women&#39;s Weekly" alt="Australian Women&#39;s Weekly logo">
    </div>
  </div>

</section>

🌍 Your Environment

Software	Version(s)
Parcel	1.9.7
Node	8.11.3
npm	6.3.00
Operating System	MacOS 10.13.6

[DeMoorJasper]

Not sure why this is happening. Does it work with pure vanilla Parcel without any plugins?

[jono-hayward]

Argh. It was parcel-plugin-inlinesvg which I installed briefly but didn't end up using and completely forgot about. My bad, sorry!