溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下
首先給圖片地址綁定變量：
<template> <img :src="imgUrl"> </template>
在script中設置變量：
//方法1：直接將圖片引入為模塊
require imgUrl from "../assets/test.png"
//方法2：把imgUrl放在數據中
data() {
return {
imgUrl:require("../assets/test.png")
}
}
補充方法2：(在data數組中保存數據的情況）
data() {
test: [
{ imgUrl: require('../assets/test.png'), id: '1' },
],
...
}
//方法3：在生命周期函數中設置
data() {
return {
imgUrl:" "
}
}
created() {
let urlTemp = "assets/test.png";
this.imgUrl = require("@/" + urlTemp)
}
</script>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
