Javascript 如何使用es6导入图像

我正在使用es6，希望导入一个图像以与webpack一起使用。看一下，这是他们给出的示例：

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

url现在将返回类似于

/static/351f9446b3ba577b6a79e373e074d200.png的内容

这适用于require，但是如何使用
import
来实现这一点，我已经尝试过了-

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

但这不起作用，因为url仍然未定义。如果是图像，如何将变量设置为导入的内容？
使用

从“file../file.png”导入url

从“../images/151.png”导入*作为url

但这不起作用，因为url仍然未定义。如果是图像，如何将变量设置为导入的内容

使用插入文件加载器的Webpack2.0。它在我的例子中起作用，但import返回类似于objectbytemap的内容，而不是数据uri字符串

该对象具有“default”属性，该属性包含相同的数据，就像它是必需的一样

老实说，我不确定那个对象是什么，为什么会有默认属性，但这就是我如何使它工作的


import'../css/bootstrap.css'；
导入“../css/app.scss”；
从“../images/webpack_logo.png”导入*作为url；
设img=document.createElement（'img'）；
img.style={
身高：25%，
宽度：“25”
};
调试器；
img.src=url.default；
log（'imported'，url）；
document.getElementById（'img_container'）.appendChild（img）我使用了webpack 4和es6：

const url = require('../images/webpack_logo.png');

然后将其用作我的
标记中的
src=“url”
。
使用，您可以通过以下简洁的语法实现：

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

也许这个库会有帮助，我试过使用它，但它不起作用“那不起作用”-它怎么不起作用？请解释。请参阅编辑-require将返回某些内容，但不会返回“file！”中的importimport url/file.png'你确定吗？我遇到了这个错误：
无法解析“example/index.js”中的“file./backgrounds/plan.jpg”无法生成JavaScript包。
谢谢，但是如何在实际文件中使用
youNameIt
在页面上显示图像？好吧，您导入的是图像的路径，因此您可以像这样使用它：