如何使用es6导入图像

How to use es6 import for images

本文关键字：图像 导入 es6 何使用      更新时间：2023-09-26

我使用的是es6，想要导入一个图像与webpack一起使用。看看文件加载器文档，这是他们给出的例子:

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

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

的内容

这与要求，但我如何使用import做到这一点，我已经尝试-

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

，但这不起作用，因为url仍然未定义。我如何设置一个变量，我要导入什么，当它是一个图像?

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

，但这不起作用，因为url仍然未定义。我如何设置一个变量，我要导入什么，当它是一个图像?

使用插件文件加载器的Webpack 2.0。它在我的情况下工作，但import返回类似object bytemap的东西，而不是data-uri string;

这个对象有'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。这是预料之中的，因为该语法依赖于源模块上声明的默认导出。

使用文件加载器，您可以使用简单的语法:

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

使用

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

With webpack 4 &我用了:

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

然后在我的<img>标签中使用这个作为src="url"。

相关文章：