问题形容
咱们做我的项目中，经常须要把图片出现到页面上，一般来说有以下几种形式
形式一（后端返回图片URL）
这种形式就是后端返回图片的url地址，咱们间接img标签的src属性绑定imgUrl即可。如下代码：
<div class="item" v-for="(item, index) in apiArr" :key="index"> <!-- apiArr是后端返回的数据，其中的每一项中都有一个imgUrl属性，存储的是图片的url地址 --> <img :src="item.imgUrl" alt=""></div>形式二（前端应用require）
第二种形式，把图片文件存储到前端里，后端只返回图片的名字（或不返回图片数据），代码举例如下：
代码附上
<template> <div class="wrap"> <div class="item" v-for="(item, index) in apiArr" :key="index"> <div class="imgWrap"> <!-- require引入图片文件模块 --> <img :src="require(`@/assets/img/${item.imgTitle}.png`)" alt="" /> <!-- 最初就变成这样的了就能失常显示了 <img src="@/assets/img/first.png" alt=""> --> </div> <div class="infoWrap"> <div><span class="bloder">名次：</span> {{ item.title }}</div> <div><span class="bloder">得分：</span> {{ item.score }}</div> </div> </div> </div></template><script>export default { data() { return { apiArr: [], }; }, mounted() { // 假如apiArr是咱们发申请后端返回的数据，外面的imgTitle属性存储的是图片的名字 // 通过require关键字引入，会主动到指定门路下的文件中寻找对应的图片文件加载进去 this.apiArr = [ { title: "冠军", score: "98.8", imgTitle: "first", }, { title: "亚军", score: "97.9", imgTitle: "second", }, { title: "季军", score: "96.2", imgTitle: "third", }, ]; },};</script>效果图如下
我的项目文件结构图
形式三（前端应用import）
代码附上
<template> <div class="wrap"> <div class="item" v-for="(item, index) in apiArr" :key="index"> <div class="imgWrap"> <img :src="item.imgTitle" alt="" /> </div> <div class="infoWrap"> <div><span class="bloder">名次：</span> {{ item.title }}</div> <div><span class="bloder">得分：</span> {{ item.score }}</div> </div> </div> </div></template><script>// import 引入图片import first from "@/assets/img/first.png";import second from "@/assets/img/second.png";import third from '@/assets/img/third.png'export default { data() { return { apiArr: [ { title: "冠军", score: "98.8", imgTitle: first, // 应用引入的图片 }, { title: "亚军", score: "97.9", imgTitle: second, // 应用引入的图片 }, { title: "季军", score: "96.2", imgTitle: third, // 应用引入的图片 }, ], }; },};</script>效果图和我的项目文件结构图同上，这里不赘述
总结
ES6中import形式引入，和commonjs中require形式引入图片都能够，不过我集体更加举荐应用require形式，因为略为灵便点