如何使用es6导入图像

Question

我正在使用es6并想导入一个与webpack一起使用的图像.查看文件加载器文档,这是他们给出的示例:

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

url现在会返回类似的内容 /static/351f9446b3ba577b6a79e373e074d200.png

这适用于require,但我如何使用import它,我试过 -

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

但这不起作用,因为url仍未定义.如何将变量设置为我在图像时导入的变量？

Answer 1

从'../images/151.png'导入*为url;

但这不起作用,因为url仍未定义.如何将变量设置为我在图像时导入的变量？

使用带有文件加载器插件的Webpack 2.0.它适用于我的情况,但import返回类似对象字节图而不是data-uri字符串;

此对象具有'default'属性,该属性包含相同的数据,就像它是必需的一样.

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

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

前面的答案中提到的方式返回undefined,顺便说一句.并且它是预期的,因为该语法依赖于在源模块上声明的默认导出.

Answer 2

使用文件加载器，您可以通过以下漂亮而简单的语法实现这一点：

import youNameIt from "../images/151.png";

Answer 3

使用

import url from "file!./file.png"