引言

本文介紹了在 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/

總結

以上是生活随笔為你收集整理的如何在Vue引入静态图片?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。