Search code examples
htmlwebpackecmascript-6babeljssrc

Webpack/babel/es6 forward slashes being removed from image src

So I have the following code:

import Menu from './menu';
import Kitten from './kitten';

const content = () => Kitten + Menu.menu

var app = document.getElementById('app');
app.innerHTML = content();

console.log(content());

Now this logs the following to the console:

<img src"/dist/197a114e185cbd7e1bfdb9ca2074492f.jpeg"/><button id="menu">Menu</button>

However the following is being rendered:

<div id="app"><img src"="" dist="" 197a114e185cbd7e1bfdb9ca2074492f.jpeg"=""><button id="menu">Menu</button></div>

This is what kitten looks like:

const kitten = require('./images/kitten.jpeg');
const Image = `<img src"${kitten}"/>`;
export default Image;

Any ideas what this could be?

Solution

  • You've missed the equal sign in the img:

     <img src"/dist/197a114e185cbd7e1bfdb9ca2074492f.jpeg"/>
        \/
 <img src="/dist/197a114e185cbd7e1bfdb9ca2074492f.jpeg"/>