关于vue.js:vfor循环中使用require或import关键字引入本地图片

73次阅读

共计 1817 个字符,预计需要花费 5 分钟才能阅读完成。

问题形容

咱们做我的项目中,经常须要把图片出现到页面上,一般来说有以下几种形式

形式一(后端返回图片 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 形式,因为略为灵便点

正文完
 0