如何在Vue引入静态图片?

引言

本文介绍了在 Vue 项目中引入静态图片的两种方式, 即 require 和 import; 并给出了对应的使用方法, 可供大家参考; 另外也略微研究了一下这两种方式的区别和优劣, 不当之处, 请大家不吝指出.

原文地址: http://blog.duhbb.com/2022/02/13/how-to-import-static-img-in-vue/

欢迎访问我的博客: http://blog.duhbb.com/

正在写 Vue 的一个小 demo, 需要在对话框放置一张图片, 感觉应该不用请求后端, 想着直接在前端存放这张图片就可以了.

让我直接写我是不会的, 只能上网搜索了.

引入方法

require的方式引入

<template>
  <div style="margin:100px">
    <div>
      <img :src="cat" alt="猫咪">
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      cat: require('../assets/images/cat.jpg'),
    }
  }
}
</script>

import的方式引入

• import引入图片
• data中注册一下引入的图片名称
• 模板中直接引用名称

<template>
  <div style="margin:100px">
    <div>
      <img :src="cute" alt="小可爱">
    </div>
  </div>
</template>

<script>
/* 我擦, 还能这么引入吗, 那引入过来的是个啥? */
import cute from '../assets/images/cute.jpg'
export default {
  data () {
    return {
      cute
    }
  }
}
</script>

例子, 图片类似就是这样的: assets/images/cat.jpg, 把图片放到 assets/images 这个目录下.

require和import的区别

感觉的区分一下两者的区别, 或者优劣.

require 和 import 都是为了 js 模块化而使用的.

ES6 模块的设计思想, 是尽量的静态化, 使得编译时就能确定模块的依赖关系, 以及输入和输出的变量.

require 是 CommonJS 的语法, CommonJS 的模块是对象, 输入时必须查找对象属性.

require 的核心概念: 在导出的文件中定义 module.exports, 导出的对象类型不予限定(可为任意类型). 在导入的文件中使用 require() 引入即可使用. 本质上, 是将要导出的对象赋值给 module 这个对象的 exports 属性, 在其他文件中通过 require 这个方法来访问 exports 这个属性.

import 是 es6 为 js 模块化提出的新的语法, import(导入)要与 export(导出) 结合使用。

因为 require 是运行时加载, 所以 import 命令没有办法代替 require 的动态加载功能.

这个只是暂时区分一下, 感觉一两句话说不清楚.

P.S. 所以如果图片可以动态加入到目录中, 则我们可以使用 require, 如果只能使用以及加载的图片, 我们可以使用 import, 是吗?

参考资料

• https://blog.csdn.net/wenzhengzheng/article/details/90716145
• https://blog.csdn.net/weixin_42164004/article/details/108664222
• https://www.cnblogs.com/linziwei/p/7853305.html

结束语

本文介绍了在 Vue 项目中引入静态图片的两种方式, 即 require 和 import; 并给出了对应的使用方法, 可供大家参考; 另外也略微研究了一下这两种方式的区别和优劣, 不当之处, 请大家不吝指出.

原文地址: http://blog.duhbb.com/2022/02/13/how-to-import-static-img-in-vue/

欢迎访问我的博客: http://blog.duhbb.com/