?<div id="app">
? ? ? ? <a v-bind:href="link" rel="external nofollow" >link</a>
? ? ? ? <hr>
? ? ? ? <a v-bind:href="link1" rel="external nofollow" >link1</a>
? ? ? ? <hr>
? ? ? ? <a v-bind:href="link2" rel="external nofollow" >link2</a>
? ? ? ? <hr>
? ? ? ? <a href="linkyou.html" rel="external nofollow" >啦啦啦</a>
? ? ? ? <hr>
? ? ? ? <img :src="img" alt="">
? ? </div>
? ? <script src="vue.js"></script>
? ? <script src="base.js"></script>

var ve2 = new Vue({
? ? el: '#app',
? ? data: {
? ? ? ? link: "linkyou.html",
? ? ? ? link1: "https//www.baidu.com",
? ? ? ? link2: "www.baidu.com",
? ? ? ? img: '8.jpg'
? ? }
})

v-bind:src無(wú)效問(wèn)題

vue中v-bind:src，圖片無(wú)法正常顯示

自己沒(méi)事敲點(diǎn)代碼，準(zhǔn)備激發(fā)激發(fā)靈感，做一個(gè)好項(xiàng)目，順便復(fù)習(xí)下vue, 發(fā)現(xiàn)當(dāng)我在data中模擬json數(shù)據(jù)的時(shí)候，圖片鏈接在頁(yè)面上無(wú)法正常顯示

用了各種方法，都無(wú)法正常使用，最后上網(wǎng)才發(fā)現(xiàn)是需要引入的問(wèn)題。

附上代碼

// template
<img :src="imgLink" alt="">
// script
data () {
? ? return {
? ? ?? ?// 注：引入之后，相對(duì)路徑及絕對(duì)路徑均可以使用
? ? ? imgLink: require("../../assets/img/home/recommend_bg.jpg") ?
? ? }
},

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新
這篇文章主要為大家介紹了vue源碼解讀子節(jié)點(diǎn)優(yōu)化更新示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-08-08
vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式
這篇文章主要介紹了vue中內(nèi)網(wǎng)/局域網(wǎng)/離線的情況下使用及建立項(xiàng)目方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2023-04-04
使用imba.io框架得到比 vue 快50倍的性能基準(zhǔn)
imba 是一種新的編程語(yǔ)言，可以編譯為高性能的 JavaScript?？梢灾苯佑糜?Web 編程(服務(wù)端與客戶端)開(kāi)發(fā)。這篇文章主要介紹了使用imba.io框架,得到比 vue 快50倍的性能基準(zhǔn),需要的朋友可以參考下
2019-06-06
vue的rules驗(yàn)證部分可以部分又失效的原因及解決方案
vue的rules驗(yàn)證失效,部分可以部分又失效,很多百度都有,但是我這里遇到了一個(gè)特別的,那就是prop沒(méi)有寫(xiě)全,導(dǎo)致驗(yàn)證某一個(gè)失效,接下來(lái)就跟小編一起來(lái)看看這個(gè)失效的原因和解決方案吧
2023-11-11
vue-cli3全面配置詳解
這篇文章主要介紹了vue-cli3全面配置詳解，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-11-11
在Vue-cli里應(yīng)用Vuex的state和mutations方法
今天小編就為大家分享一篇在Vue-cli里應(yīng)用Vuex的state和mutations方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
使用ElementUI循環(huán)生成的Form表單添加校驗(yàn)
這篇文章主要介紹了使用ElementUI循環(huán)生成的Form表單添加校驗(yàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教
2022-07-07
在Vue中實(shí)現(xiàn)網(wǎng)頁(yè)截圖與截屏功能詳解
在Web開(kāi)發(fā)中，有時(shí)候需要對(duì)網(wǎng)頁(yè)進(jìn)行截圖或截屏，Vue作為一個(gè)流行的JavaScript框架，提供了一些工具和庫(kù)，可以方便地實(shí)現(xiàn)網(wǎng)頁(yè)截圖和截屏功能，本文將介紹如何在Vue中進(jìn)行網(wǎng)頁(yè)截圖和截屏,需要的朋友可以參考下
2023-06-06
vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格
本文主要介紹了vue實(shí)現(xiàn)導(dǎo)入json解析成動(dòng)態(tài)el-table樹(shù)表格，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
Vue項(xiàng)目中封裝axios的方法
這篇文章主要介紹了Vue項(xiàng)目中封裝axios的方法,axios 是一個(gè)輕量的 HTTP客戶端，基于 XMLHttpRequest 服務(wù)來(lái)執(zhí)行 HTTP 請(qǐng)求，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-05-05