如何使用es6导入图像 [英] How to use es6 import for images

问题描述

我正在使用es6，并希望导入要用于webpack的图像。看看文件加载器文档，这是他们给出的例子：

  var url = require（file！./ file.png）; 
  

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

这适用于require，但是如何使用 import 来做到这一点，尝试 -

  import *作为url从'../images/151.png'; 
  

但这不起作用，因为url仍然未定义。

解决方案

导入*作为url来自'../ images / 151.png';

但这不起作用，因为url保持未定义。如何将变量设置为导入图像时的变量？

使用带有文件加载器的Webpack 2.0插件。它在我的情况下工作，但导入返回类似对象bytemap而不是data-uri字符串;

此对象具有包含相同数据的默认属性，就好像它是必需的。

老实说，我不知道该对象是什么，为什么会有默认属性，但是这是我如何使其工作。 / p>

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

上一个答案中提到的方式未定义，btw。并且预期在源模块上声明了语法依赖于默认导出的cuase。

I'm using es6 and want to import an image to use with webpack. Looking at the file-loader doc, this is the example they gave:

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

url will now return something like /static/351f9446b3ba577b6a79e373e074d200.png

This works with require, but how do I use import to do this, I've tried -

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?

解决方案

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 im'not sure what is that object, and why there is the default property but thats how I'v made it works.

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 cuase that's syntax relyes on default export been declared on the source module.

这篇关于如何使用es6导入图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！