1.require形式引入

<template><div style="margin:100px"><div><img :src="cat" // 圖片srcalt="貓咪"></div></div> </template> <script> export default {data () {return {cat: require('../assets/images/cat.jpg'), // require轉換一下圖片地址}} } </script>

2.import形式引入

• import引入圖片
• data中注冊一下引入的圖片名稱
• 模板中直接引用名稱

<template><div style="margin:100px"><div><img :src="cute" // img地址alt="小可愛"></div></div> </template> <script> import cute from '../assets/images/cute.jpg' // import引入 export default {data () {return {cute // data中注冊圖片}} } </script>

圖片存放及組件目錄

總結

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

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