关于vue中的加载静态资源文件的方式

青枫岸，白石湫

于 2021-05-06 14:30:39 发布

阅读量2.3k

点赞数

分类专栏： VUE

本文链接：https://blog.youkuaiyun.com/bajie_year/article/details/116453295

版权

VUE 专栏收录该内容

15 篇文章

订阅专栏

在vue中加载静态资源的方式，常用的方式：
1.<img :src="./static/images/logo.png"
2.动态加载组件

导入：import banner from '@/assets/imges/banner.png'
定义：在 data 中定义：banner
使用：<img :src="banner" />

3.循环加载图片

export default {
  data() {
    return {
      banner,
      imglist: [
        { src: require("@/assets/imgs/11.png"), title: "11" },
        { src: require("@/assets/imgs/22.png"), title: "222" },
        { src: require("@/assets/imgs/33.png"), title: "333" },
        { src: require("@/assets/imgs/44.png"), title: "444" },
        { src: require("@/assets/imgs/55.png"), title: "555" },
        { src: require("@/assets/imgs/66.png"), title: "666" },
        { src: require("@/assets/imgs/77.png"), title: "777" },
        { src: require("@/assets/imgs/888.png"), title: "888" }
      ],



//页面使用
<div class="imgbox">
      <ul>
        <li v-for="(item, index) in imglist" :key="index">
          <img :src="item.src" alt="" />
          <span>{{ item.title }}</span>
        </li>
      </ul>
    </div>