How to use es6 import for images

by

import * as url from ‘../images/151.png’;

but that doesn’t work because url remains undefined. How do I set a variable to what I’m importing when it’s an image?

Using Webpack 2.0 with file-loader plugged-in. It works in my case, but import returns something like object bytemap instead of data-uri string;

And this object has the ‘default’ property, that contains the same data, as if it was required.

Honestly I’m not sure what is that object, and why there is the default property but that’s how I’ve made it work.

import '../css/bootstrap.css';
import '../css/app.scss';
import * as url from '../images/webpack_logo.png';

let img = document.createElement('img');
img.style = {
  height: '25%',
  width: '25'
};
debugger;


img.src = url.default;
console.log('imported', url);

document.getElementById('img_container').appendChild(img);

The way mentioned in previous answer returned undefined, btw. And it’s expected, because that syntax relies on default export to be declared on the source module.

Leave a Comment