v-for循环中使用require/import关键字引入本地图片的几种方式

问题描述

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

方式一（后端返回图片URL）

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

方式二（前端使用require）

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

代码附上

效果图如下

项目文件结构图

方式三（前端使用import）

代码附上

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

总结

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

到此这篇关于v-for循环中使用require/import关键字引入本地图片的文章就介绍到这了,更多相关v-for引入本地图片内容请搜索0133技术站以前的文章或继续浏览下面的相关文章希望大家以后多多支持0133技术站！