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

目录
  • 问题描述
  • 方式一(后端返回图片URL)
  • 方式二(前端使用require)
  • 方式三(前端使用import)
  • 总结

问题描述

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

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

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

(0)

相关推荐

  • vue实现引入本地json的方法分析

    本文实例讲述了vue实现引入本地json的方法.分享给大家供大家参考,具体如下: 当前需要使用的组件: import data from './test.json' export default{ data(){ return{ userinform: '' } }, mounted(){ this.userinform = data } } test.json就是普通json格式就可以了!然后完美解决! 后台服务器请求json方式: this.$http.get('url').then(res

  • vue-cli2.x项目优化之引入本地静态库文件的方法

    demo地址:https://github.com/cag2050/vue_cli_optimize_static_resource vue-cli 将静态资源文件放到 static 文件夹下并引用: 1.将 node_modules 下相应的 xxx.min.js,复制到项目 static 文件夹下 2.index.html 修改 添加script引入 <script src="static/js/vue.min.js"></script> <scrip

  • vue data引入本地图片的两种方式小结

    我就废话不多说了,大家直接看吧! 第一种 <template> <img :src="imgsrc"> </template> <script> export default { data () { return { imgsrc: require('../../images/ICON-electronicbilling.png') } } } </script> 第二种 <template> <img :s

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

    目录 问题描述 方式一(后端返回图片URL) 方式二(前端使用require) 方式三(前端使用import) 总结 问题描述 我们做项目中,常常需要把图片呈现到页面上,一般来说有以下几种方式 方式一(后端返回图片URL) 这种方式就是后端返回图片的url地址,我们直接img标签的src属性绑定imgUrl即可.如下代码: <div class="item" v-for="(item, index) in apiArr" :key="index&qu

  • Vue中引入svg图标的两种方式

    Vue中引入svg图标的方式 Vue中引入svg图标的方式一 安装 yarn add svg-sprite-loader --dev svg组件 index.vue <!-- svg组件 --> <template> <svg class="svg-icon" :class="svgClass" aria-hidden="true"> <use :xlink:href="iconName&quo

  • react 项目中引入图片的几种方式

    img标签引入图片 因为react其实是通过js的reader函数渲染的页面,所以直接写src="路径"是无法引入图片 我们可以像引入模块一样引入图片 import img from './../../../../asset/img/user.png' 需要用下面的方式引入 <img src={require('../images/picture.png')} alt="标签"/> 背景图片引入 1 第一种就是常规的 新建一个css文件,然后就可以直接写

  • iOS开发中UIWebView的加载本地数据的三种方式

    UIWebView是IOS内置的浏览器,可以浏览网页,打开文档 html/htm pdf docx txt等格式的文件. safari浏览器就是通过UIWebView做的. 服务器将MIME的标识符等放入传送的数据中告诉浏览器使用那种插件读取相关文件. uiwebview加载各种本地文件(通过loadData方法): UIWebView加载内容的三种方式: 1 加载本地数据文件 指定文件的MIMEType 编码格式使用@"UTF-8" 2加载html字符串(可以加载全部或者部分html

  • 在Android TextView中显示图片的4种方式详解

    我们知道,TextView控件一般是用来显示文本的,而图片一般是用ImageView控件来显示. 那TextView能否显示图片呢?答案是肯定的!下面列出常见的4种方式. 1.XML文件中指定属性值 这种方式应该是最常用的了,在TextView的左上右下显示图片,可用  android:drawableLeft  android:drawableTop  android:drawableRight  android:drawableBottom 比如我们要在TextView的顶部设置图片,代码如

  • 在Qt中正确的设置窗体的背景图片的几种方法总结

    Qt中正确的设置窗体的背景图片的方法大致有两种,下面将逐个讲解: 一. 利用styleSheet设置窗体的背景图片 使用stylesheet设置窗体的背景图片的时候,可以直接按照下图的操作去进行即可,如下图所示: 但是,需要注意的是: 1.在QWidget中这种方法是不行的,如果你足够细心的话,你会发现使用同样的设置背景图片的方法,背景图片其实并没有发生真实改变,但是它的子窗体背景图片是会发生改变的. 其实我们可以通过在添加一个i额QWidget来解决这个问题,即在QtDesigner中添加一个

  • oracle中得到一条SQL语句的执行时间的两种方式

    oracle中如果需要得到一条SQL语句的执行时间可以用如下2种方式 复制代码 代码如下: SQL> set timing on; SQL> select count(*) from wea; COUNT(*) ---------- 39490 已用时间: 00: 00: 00.06 SQL> select sql_text, elapsed_time from v$sql 2 where sql_text like 'select count(*) from wea'; 未选定行 已用

  • java中获取类加载路径和项目根路径的5种方式分析

    复制代码 代码如下: package my; import java.io.File; import java.io.IOException; import java.net.URL; public class MyUrlDemo { public static void main(String[] args) {         MyUrlDemo muDemo = new MyUrlDemo();         try {             muDemo.showURL();    

  • iOS应用开发中使用UIScrollView控件来实现图片缩放

    一.知识点简单介绍 1.UIScrollView控件是什么? (1)移动设备的屏幕⼤大⼩小是极其有限的,因此直接展⽰示在⽤用户眼前的内容也相当有限 (2)当展⽰示的内容较多,超出⼀一个屏幕时,⽤用户可通过滚动⼿手势来查看屏幕以外的内容 (3)普通的UIView不具备滚动功能,不能显⽰示过多的内容 (4)UIScrollView是一个能够滚动的视图控件,可以⽤用来展⽰示⼤大量的内容,并且可以通过滚 动查看所有的内容 (5)  举例:手机上的"设置".其他⽰示例程序 2.UIScrollV

  • Django中的文件的上传的几种方式

    PS:这段时间有点不在状态,刚刚找回那个状态,那么我们继续曾经的梦想 今天我们来补充一下文件的上传的几种方式: 首先我们先补充的一个知识点: 一.请求头ContentType: ContentType 指的是请求体的编码类型,常见的类型共有三种: 1.application/x-www-form-urlencoded 这应该是最常见的POST提交数据的方式.浏览器的原生 <form> 表单,如果不设置 enctype 属性,那么最终就会以 application/x-www-form-urle

随机推荐