引言

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