vue的三種圖片引入方式代碼實例
更新時間：2019年11月19日 09:55:11 作者：周逸航
這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
首先給圖片地址綁定變量：
<template> <img :src="imgUrl"> </template>
在script中設(shè)置變量：
//方法1：直接將圖片引入為模塊
require imgUrl from "../assets/test.png"
//方法2：把imgUrl放在數(shù)據(jù)中
data() {
return {
imgUrl:require("../assets/test.png")
}
}
補充方法2：(在data數(shù)組中保存數(shù)據(jù)的情況）
data() {
test: [
{ imgUrl: require('../assets/test.png'), id: '1' },
],
...
}
//方法3：在生命周期函數(shù)中設(shè)置
data() {
return {
imgUrl:" "
}
}
created() {
let urlTemp = "assets/test.png";
this.imgUrl = require("@/" + urlTemp)
}
</script>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vuejs第一篇之入門教程詳解（單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)）
組件（Component）是 Vue.js 最強大的功能之一。接下來給大家介紹vuejs單向綁定、雙向綁定、列表渲染、響應(yīng)函數(shù)的相關(guān)知識，非常不錯，感興趣的朋友一起看看吧2016-09-09
$是在vue中所有實例中都可用的一個簡單約定,這樣做會避免和已被定義的數(shù)據(jù),方法,計算屬性產(chǎn)生沖突,下面這篇文章主要給大家介紹了關(guān)于vue中$含義及其用法的相關(guān)資料,需要的朋友可以參考下2023-04-04
今天小編就為大家分享一篇Vue2.0點擊切換類名改變樣式的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
前端上傳文件很大時,會出現(xiàn)各種問題,比如連接超時了,網(wǎng)斷了,都會導(dǎo)致上傳失敗,這個時候就需要將文件切片上傳,下面我們就來學(xué)習(xí)一下如何使用vue實現(xiàn)大文件切片上傳吧2023-11-11
vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題
這篇文章主要介紹了vscode配置@路徑提示方式,并解決vue文件內(nèi)失效的問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue 自定義icon的圖標(biāo)的步驟，文中大概給大家分為兩步驟，通過實例圖文相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2021-08-08
這篇文章主要介紹了解決vue移動端適配問題,小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新)
這篇文章主要介紹了解決vue數(shù)據(jù)不實時更新的問題(數(shù)據(jù)更改了,但數(shù)據(jù)不實時更新)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-10-10
插槽（slot）是 vue 為組件的封裝者提供的能力。允許開發(fā)者在封裝組件時，把不確定的、希望由用戶指定的部分定義為插槽?？梢园巡宀壅J(rèn)為是組件封裝期間，為用戶預(yù)留的內(nèi)容的占位符2022-09-09
Vue3 在經(jīng)過多個開發(fā)版本的迭代后,終于迎來了它的正式版本,下面這篇文章主要給大家介紹了關(guān)于如何使用vue3實現(xiàn)一個人喵交流小程序的相關(guān)資料,需要的朋友可以參考下2021-11-11