javascript - 如何使用 es6 导入图像

Question

我正在使用 es6 并想导入图像以与 webpack 一起使用。看着 file-loader doc ，这是他们给出的例子:

var url = require("file!./file.png");

url 现在将返回类似于 /static/351f9446b3ba577b6a79e373e074d200.png

这适用于 require，但我如何使用 import 来做到这一点，我试过了 -

import * as url from '../images/151.png';

但这不起作用，因为 url 仍未定义。当它是图像时，如何将变量设置为我要导入的内容？

Answer 1

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?

使用带有文件加载器插件的 Webpack 2.0。它适用于我的情况，但导入返回类似对象字节图而不是数据 uri 字符串的内容；

并且此对象具有“默认”属性，其中包含相同的数据，就好像它是必需的一样。

老实说，我不确定那个对象是什么，也不确定为什么有默认属性，但这就是我让它工作的方式。

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);

前面回答中提到的方式返回未定义，顺便说一句。这是意料之中的，因为该语法依赖于在源模块上声明的默认导出。