vue data使用外部其他js文件（使用其他数据大量图片）

vicky_yongqi

于 2019-12-04 10:38:21 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue笔记文章标签：外部js数据其他js文件

本文链接：https://blog.csdn.net/vicky_yongqi/article/details/103382214

vue笔记专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种在Vue项目中将大量本地图片资源集中管理的方法，通过创建单独的js文件来存放图片资源，利用require语法动态导入，再通过data()函数返回，最后在Vue组件中引用该js文件实现图片的展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.js文件 img.js

js文件里都是本地图片资源（本地图片导入方法）

export default {
  data () {
    return {
      imgUrl: require('@/pages/MSite/image/1.jpg')
    }
  }
}

2.vue使用

<template>
  <img :src="imgUrl">
</template>
<script>
import img from 'common/js/img.js'
export default {
  data() {
    return {
      ...img.data()
    }
  }
}  
</script>

这样大量本地图片就可以直接放置在一个js文件里面，而不是全写在vue文件里面。