v-for循环中使用require或import关键字引入本地图片

问题描述

我们做项目中,常常需要把图片呈现到页面上,一般来说有以下几种方式

方式一(后端返回图片URL)

这种方式就是后端返回图片的url地址,我们直接img标签的src属性绑定imgUrl即可。如下代码:

方式二(前端使用require)

第二种方式,把图片文件存储到前端里,后端只返回图片的名字(或不返回图片数据),代码举例如下:

代码附上



效果图如下

v-for循环中使用require或import关键字引入本地图片_第1张图片

项目文件结构图

v-for循环中使用require或import关键字引入本地图片_第2张图片

方式三(前端使用import)

代码附上



效果图和项目文件结构图同上,这里不赘述

总结

ES6中import方式引入,和commonjs中require方式引入图片都可以,不过我个人更加推荐使用require方式,因为略为灵活点

你可能感兴趣的:(v-for循环中使用require或import关键字引入本地图片)