国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

vue循環(huán)如何動(dòng)態(tài)加載本地圖片

這篇具有很好參考價(jià)值的文章主要介紹了vue循環(huán)如何動(dòng)態(tài)加載本地圖片。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請(qǐng)大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

顯示效果:

vue循環(huán)如何動(dòng)態(tài)加載本地圖片,vue.js,前端,javascript

代碼:

html:

<el-tooltip :content="setTip(item)" placement="bottom">
  <img :src="setSrc(item)" alt="" width="20" height="20" />
</el-tooltip>

?js:文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-524244.html

setTip(item) {
      if (item.fileType === "pdf") {
        return "PDF";
      } else if (item.fileType === "html") {
        return "HTML";
      } else if (item.fileType === "docx") {
        return "WORD";
      } else if (item.fileType === "xlsx") {
        return "EXCEL";
      } else if (item.fileType === "csv") {
        return "CSV";
      } else {
        return "DEFAULT";
      }
    },
    setSrc(item) {
      if (item.fileType === "pdf") {
        return require("@/static/images/pdf.png");
      } else if (item.fileType === "html") {
        return require("@/static/images/html.png");
      } else if (item.fileType === "docx") {
        return require("@/static/images/word.png");
      } else if (item.fileType === "xlsx") {
        return require("@/static/images/excel.png");
      } else if (item.fileType === "csv") {
        return require("@/static/images/csv.png");
      } else {
        return require("@/static/images/default.png");
      }
    },

到了這里,關(guān)于vue循環(huán)如何動(dòng)態(tài)加載本地圖片的文章就介紹完了。如果您還想了解更多內(nèi)容,請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來(lái)自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場(chǎng)。本站僅提供信息存儲(chǔ)空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請(qǐng)注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請(qǐng)點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • vue3:加載本地圖片等靜態(tài)資源

    vue3:加載本地圖片等靜態(tài)資源

    在我們用 vue2 + webpack 的時(shí)候,加載圖片資源是這樣用的: 這樣打包后就會(huì)觸發(fā) file-loader 打包圖片資源,在 dist 文件夾中就可以看到這個(gè)圖片(如果圖片較小會(huì)打包進(jìn)代碼中變?yōu)?base64 引入)。 但是在 vue3 + vite 中,使用這種方式是不行的,vite 中沒(méi)有 require 會(huì)報(bào)錯(cuò)。 解決方案

    2024年01月18日
    瀏覽(26)
  • 〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript的流程控制語(yǔ)句「while循環(huán)語(yǔ)句」

    〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript的流程控制語(yǔ)句「while循環(huán)語(yǔ)句」

    當(dāng)前子專欄 基礎(chǔ)入門(mén)三大核心篇 是免費(fèi)開(kāi)放階段 。 推薦他人訂閱,可獲取扣除平臺(tái)費(fèi)用后的35%收益,文末名片加V! 說(shuō)明:該文屬于 大前端全棧架構(gòu)白寶書(shū)專欄, 目前階段免費(fèi)開(kāi)放 , 購(gòu)買任意白寶書(shū)體系化專欄可加入 TFS-CLUB 私域社區(qū)。 福利:除了通過(guò)訂閱\\\"白寶書(shū)系列專

    2024年02月04日
    瀏覽(28)
  • 〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript的流程控制語(yǔ)句「for循環(huán)語(yǔ)句及算法題」

    〖大前端 - 基礎(chǔ)入門(mén)三大核心之JS篇?〗- JavaScript的流程控制語(yǔ)句「for循環(huán)語(yǔ)句及算法題」

    當(dāng)前子專欄 基礎(chǔ)入門(mén)三大核心篇 是免費(fèi)開(kāi)放階段 。 推薦他人訂閱,可獲取扣除平臺(tái)費(fèi)用后的35%收益,文末名片加V! 說(shuō)明:該文屬于 大前端全棧架構(gòu)白寶書(shū)專欄, 目前階段免費(fèi)開(kāi)放 , 購(gòu)買任意白寶書(shū)體系化專欄可加入 TFS-CLUB 私域社區(qū)。 福利:除了通過(guò)訂閱\\\"白寶書(shū)系列專

    2024年02月07日
    瀏覽(28)
  • Vue3的vite中圖片的動(dòng)態(tài)加載

    vite官網(wǎng)的靜態(tài)資源引入?yún)⒖嫉刂?new URL() + import.meta.url 注意:這里只能通過(guò) …/…/ 這種方式去獲取路徑,無(wú)法通過(guò)@/assets

    2024年02月16日
    瀏覽(32)
  • Vue + Element UI 前端篇(十):動(dòng)態(tài)加載菜單

    Vue + Element UI 前端篇(十):動(dòng)態(tài)加載菜單

    之前我們的導(dǎo)航樹(shù)都是寫(xiě)死在頁(yè)面里的,而實(shí)際應(yīng)用中是需要從后臺(tái)服務(wù)器獲取菜單數(shù)據(jù)之后動(dòng)態(tài)生成的。 我們?cè)谶@里就用上一篇準(zhǔn)備好的數(shù)據(jù)格式Mock出模擬數(shù)據(jù),然后動(dòng)態(tài)生成我們的導(dǎo)航菜單。 接口模塊化 我們向來(lái)講究模塊化,之前接口都集中在,interface.js,我們現(xiàn)在把

    2024年02月09日
    瀏覽(31)
  • 前端如何實(shí)現(xiàn)本地圖片上傳?

    對(duì)于學(xué)習(xí)前端的小伙伴都有一個(gè)困惑,就是平常想上手小項(xiàng)目,但礙于不想購(gòu)買服務(wù)器,實(shí)踐受到了限制。 一般我選擇node.js搭建服務(wù)器,畢竟基于JavaScript語(yǔ)言,簡(jiǎn)直不是一家人不進(jìn)一家門(mén)。 但是,剛學(xué)node.js只會(huì)鏈接數(shù)據(jù)庫(kù)進(jìn)行增刪改查,圖片上傳簡(jiǎn)直就是渣渣…… 現(xiàn)在,

    2024年02月05日
    瀏覽(15)
  • js修改img的src屬性顯示變換圖片到前端頁(yè)面,img的src屬性顯示java后臺(tái)讀取返回的本地圖片

    js修改img的src屬性顯示變換圖片到前端頁(yè)面,img的src屬性顯示java后臺(tái)讀取返回的本地圖片

    img的src屬性是前端用來(lái)顯示一張圖片的來(lái)源,一般情況下src最常見(jiàn)是顯示項(xiàng)目中resourcesstatic問(wèn)價(jià)夾下的圖片,或者顯示公網(wǎng)上的圖片,如果想要在前端顯示本地圖片那要怎么處理呢?如果直接用本地圖片的地址(例如src=“D:Userstest.jpg”)前端是無(wú)法顯示的。 img 是空標(biāo)簽,它

    2024年02月14日
    瀏覽(25)
  • 前端 img圖片如何 展示 base64 格式(并且下載到本地)

    前端 img圖片如何 展示 base64 格式(并且下載到本地)

    如題:最近在做項(xiàng)目發(fā)現(xiàn)頁(yè)面上有些圖片是動(dòng)態(tài)獲取的,也就是后臺(tái)給我們返回圖片的存放地址,一般都是放在服務(wù)器上的某個(gè)位置,我們直接拿到渲染一下就行了,(前提是不存在跨域問(wèn)題), 但是由于項(xiàng)目特殊性,后臺(tái)使用了Python 渲染出來(lái)的圖片是svg格式的圖片,并且

    2024年02月09日
    瀏覽(41)
  • 【JavaScript】后端返回的二進(jìn)制流音頻數(shù)據(jù)或本地音頻資源,前端如何播放?

    如果我們要使用本地的音頻資源,在 vue3 中那么我們需要對(duì)資源的地址做一下處理 后端返回二進(jìn)制流音頻數(shù)據(jù),怎么讓其可播放 前端播放二進(jìn)制語(yǔ)音流

    2024年02月03日
    瀏覽(33)

覺(jué)得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請(qǐng)作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包