锐客网

  1. 首页 > it技术 > >

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

问题描述 【v-for循环中使用require或import关键字引入本地图片|v-for循环中使用require或import关键字引入本地图片】我们做项目中，常常需要把图片呈现到页面上，一般来说有以下几种方式
方式一（后端返回图片URL） 这种方式就是后端返回图片的url地址，我们直接img标签的src属性绑定imgUrl即可。如下代码：

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

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

效果图如下
v-for循环中使用require或import关键字引入本地图片|v-for循环中使用require或import关键字引入本地图片
文章图片

项目文件结构图
v-for循环中使用require或import关键字引入本地图片|v-for循环中使用require或import关键字引入本地图片
文章图片

方式三（前端使用import） 代码附上

效果图和项目文件结构图同上，这里不赘述
总结 ES6中import方式引入，和commonjs中require方式引入图片都可以，不过我个人更加推荐使用require方式，因为略为灵活点

    推荐阅读


    上一篇：区块链|TeaChain开启全球化布局 从每一个TeaChain人做起

    下一篇：并发编程之（synchronized|并发编程之：synchronized）