vue 正常引入图片的几种方法

2020-03-04  本文已影响0人  jasmine_6aa1

1, vue 正常引入图片的几种方法

首先要在文档中绑定图片变量,两种方式

//方法一:
<div v-for="(item,index) of imgUrl" :key="index">
      <img :src="item" alt="图片展示">
</div>
//方法二:
<div :style="{background:'url('+images[currentIndex]+')'}">
<div>

在script 中设置变量

//方法一:
data() {
    const img1 = require("@/assets/img/1920_1.jpg");
    const img2 = require("@/assets/img/timg1.jpg");
    const img3 = require("@/assets/img/timg3.jpg");
    const img4 = require("@/assets/img/timg4.jpg");
    return {
      images: [img1, img2, img3, img4]
}

//方法二:
data() {
   return {
    images: [require("@/assets/img/1920_1.jpg"),
             require("@/assets/img/timg1.jpg"),                   
             require("@/assets/img/timg3.jpg"),          
             require("@/assets/img/timg4.jpg")]
  }

2,

上一篇下一篇

猜你喜欢

热点阅读