「这是我参与11月更文挑战的第9天，活动详情查看：2021最后一次更文挑战」
前面我们是在 css 中使用了图片资源。下面，我们再通过第 2 种方式使用图片，在 ./src/js/element.js 中添加相关代码，添加后文件内容如下：
import '../css/style.css';
import '../css/title.less';
import '../css/image.css';
const divEl = document.createElement('div');
divEl.className = 'title';
divEl.innerHTML = "你好，同志！";
// 设置背景图片
const bgDivEl = document.createElement('div');
bgDivEl.className = 'image-bg';
// 创建一个 <img> 元素，然后为其设置 src
const imgEl = document.createElement('img');
imgEl.src = "../img/dxm.png"; // 你可能会给 src 属性这样赋值
document.body.appendChild(divEl);
document.body.appendChild(bgDivEl);
document.body.appendChild(imgEl);
然后我们打包看下会不会出错：
可以看到，除了一个警告，打包没有出错。但我们打开页面看下效果：
页面上图片却没有成功显示，这是为什么呢？这是因为当前 <img> 的 src 属性解析出来的值是 ../img/dxm.png，即查找的是当前文件的上一层目录下的 img 目录下的 dxm.png 文件，但最终没有找到，原因在于这是一个相对路径，相对于当前 index.html 文件所在的位置：
而现在，index.html 文件的上一层目录是 webpack_资源，这个目录下没有 img 目录，因此最终也查找不到对应的图片文件。找不到的话，我们知道，在 HTML 中如果有一张图片不能显示时，<img> 元素就会显示一个小的占位图标。
所以我们当前的这种写法（imgEl.src = "../img/dxm.png";）最终是不能成功显示对应图片的。而且，如果我们查看打包输出的目录下的文件，会发现里面也没有这张图片对应的打包文件：
那为什么没有对这张图片做打包呢？原因非常简单，imgEl.src = "../img/dxm.png"; 这种写法是直接用一个字符串给 src 属性进行了赋值，那么 src 的值永远是一个字符串，这就意味着字符串的值如果是一个相对路径那么就永远是一个相对路径，它并不会根据这个路径去找到资源所在的真正位置。而要想让它根据这个路径去找到资源真正所在的位置，就得像模块一样去使用这个图片资源（我们知道，开发中，在 JS 代码中我们是通过 import/require() 的方式去加载某个模块的，然后可以将这个模块赋值给 src，之后在打包时，webpack 就会知道这里本质上是一个模块，它就会找到这个模块真正指向的资源，然后赋值给 src，到时候再去找就能找到正确的路径了）。
所以我们将 ./src/js/element.js 中的代码修改如下：
import '../css/style.css';
import '../css/title.less';
import '../css/image.css';
// 导入图片文件，将图片文件当成模块使用
import dxmImage from '../img/dxm.png';
...
// 创建一个 <img> 元素，然后为其设置 src
const imgEl = document.createElement('img');
// 将图片模块赋值给 src
imgEl.src = dxmImage;
document.body.appendChild(divEl);
document.body.appendChild(bgDivEl);
document.body.appendChild(imgEl);
再来打包查看效果：
可以看到，打包输出的文件夹中现在就有两张图片了，而且页面上也能成功展示对应的图片了：
这是因为现在去找这张图片时，是根据该图片资源当前所在的真正位置（http://127.0.0.1:5502/webpack_%E8%B5%84%E6%BA%90/build/d06a41c5bd83e6876f4399b7318a0048.png）来进行显示的。
以上，就是关于图片的另外一种使用方式（即在 JavaScript 代码中需要通过类似于 import 的语法使用图片）及打包过程。
