老师你好，关于 art-template问题

图 1

图 2

老师你好，图中是 webpack + art-template + art-template-loader 使用模版引擎。

图1 art模版文件中，第一个 img 标签的 url 是通过 art-template 遍历传参的方式获得，第二个 img 标签的 url 是直接写图片所在的地址。

最后经过 webpack 打包所生成的结果如图 2，第二个 img 引用的图片可以被 webpack 正常处理打包，显示正常；但是第一个 img 引用的图片并没有被 webpack 打包处理，所以无法显示

因为自己在网上找了好久还是没找到问题原因和解决方案，所以这里麻烦老师帮忙解答下。

慕的地9277935 2021-06-25

源自：“仿穷游”首页组件化开发 2-4 在Webpack中使用art-template

收起

2回答

好帮手慕慕子回答被采纳获得+3积分 2021-06-29 14:42:09

同学你好，对于你的问题解答如下：

1、

上图中的问题，如果需要使用这种形式，可以将需要使用到的图片手动添加到打包后dist目录的images文件夹下。

2、

上图中的问题，老师目前没有发现其他的解决方式。不过同学不用担心，实际开发中，一般都是后台提供在线的图片供我们直接使用，后面的课程中老师也会讲解，如何根据ajax请求将获取的数据渲染到页面中。

3、

上图中的问题，理解是对的，因为{imgUrl: 'xxx/xxx.png'}这种写法，'xxx/xxx.png'表示js中的一个字符串，所以webpack无法处理对应的图片地址。

4、截图中意思大致是art文件中以/开头的路径，webpack默认不做其他的处理，如果设置了htmlResourceRoot属性后，webapck会统一处理所有以/开头的路径，添加前缀。示例：

实际开发中很少这样使用，了解下即可，目前重点是先跟着课程安排学习老师讲解的知识

祝学习愉快~

收起回答

慕的地9277935 提问者 #1

好的，谢谢老师~

2021-06-29 16:10:14

好帮手慕慕子 2021-06-25 19:05:05

同学你好，因为老师这里给同学提供一个思路，如下：

在js文件中先通过import加载图片，然后作为数据传入模板，示例：

模板中两种方式对比书写，如下：

webpack打包后都可以正常处理图片路径，如下：

如果图片比较多的情况下，可以将js文件的图片路径书写为/images/xxx.png测试下，如下：

祝学习愉快~

收起回答

提问者慕的地9277935 #1
老师你好，按老师介绍的方法操作：
1、通过 import 加载图片，然后作为参数传入模板，图片会被 webpack 打包处理，打包生成的 dist 目录下的 images 文件里有相应的图片，可以正常使用；
2、将 js 文件中的图片路径书写为 images/xxx.png，图片并不会被 webpack 打包处理，打包生成的 dist 目录下的 images 文件夹里并没有相应的图片文件，无法正常使用；
3、因为图片较多，全部通过 import 加载图片的方式，感觉不太优雅，所以想请教下老师，是否还有其他的解决方案？
4、给模板文件传递图片地址后，webpack 在打包处理这部分内容时，给人的感觉有种像是并没有使用相应的处理图片的 loader 来处理这里的内容，如 file-loader、url-loader 亦者 html-withimg-loader；
```
js 文件
const list = [
  {imgUrl: './../../../../assets/images/product01.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product02.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product03.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product04.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product05.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product06.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product07.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product08.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product09.png', title: '时尚卫生间墙面颜色2029装饰设计'},
  {imgUrl: '../../../../assets/images/product10.png', title: '时尚卫生间墙面颜色2029装饰设计'}
]
art 文件
<img src="{{$value.imgUrl}}">
```
5、查看 art-template-loader 说明，其中有一段这样的说明（如下图所示），对它说的不理解，还请老师帮忙看下，这是该 loader 在 npm 上的地址，下图中的内容也有在该页面中：https://www.npmjs.com/package/art-template-loader
2021-06-29 08:43:18