如何在Vue引入静态图片

2022-07-23 09:45:17

引言

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

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

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

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

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

引入方法

require的方式引入

<template><divstyle="margin:100px"><div><img:src="cat"alt="猫咪"></div></div></template><script>exportdefault{data(){return{
      cat:require('../assets/images/cat.jpg'),}}}</script>

import的方式引入

  • import引入图片
  • data中注册一下引入的图片名称
  • 模板中直接引用名称
<template><divstyle="margin:100px"><div><img:src="cute"alt="小可爱"></div></div></template><script>/* 我擦, 还能这么引入吗, 那引入过来的是个啥? */import cutefrom'../assets/images/cute.jpg'exportdefault{data(){return{
      cute}}}</script>

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

require和import的区别

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

requireimport 都是为了 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, 是吗?

参考资料

结束语

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

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

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

  • 作者:tuhoooo
  • 原文链接:https://blog.csdn.net/ea8d1n3/article/details/122909260
    更新时间:2022-07-23 09:45:17