微信小程序顯示圖片文件流

2年前作者：suoh's Blog分類：Toy博客閱讀(94)違法舉報(bào)

這篇具有很好參考價(jià)值的文章主要介紹了微信小程序顯示圖片文件流。希望對(duì)大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方，請(qǐng)大家不吝賜教，您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問(wèn)。

?單獨(dú)訪問(wèn)圖片鏈接是文件流的形式

?因此我們需要請(qǐng)求這個(gè)url，將文件流轉(zhuǎn)成base64文件

    wx.request({
        url: res.data.qrcode, //獲取圖片的URL
        method: "get",
        responseType: 'arraybuffer', //ArrayBuffer涉及面比較廣，我的理解是ArrayBuffer代表內(nèi)存之中的一段二進(jìn)制數(shù)據(jù)，一旦生成不能再改?？梢酝ㄟ^(guò)視圖（TypedArray和DataView）進(jìn)行操作。
        success: (res) => {
             let url = 'data:image/png;base64,' + wx.arrayBufferToBase64(res.data)
             this.setData({
                  codeImg:url
             })
        },
        fail(res) {

        }
    })

wxml里面賦值就好了:

  <image src="{{codeImg}}"></image>

圖片就顯示出來(lái)了、?文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-615302.html

到了這里，關(guān)于微信小程序顯示圖片文件流的文章就介紹完了。如果您還想了解更多內(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)用

微信小程序（二）微信小程序選擇本地圖片顯示并預(yù)覽（實(shí)現(xiàn)左右滑動(dòng)）
在微信小程序里面實(shí)現(xiàn)選擇圖片然后預(yù)覽是一個(gè)非常普遍的功能，在我們上傳圖片文件的時(shí)候，都會(huì)選擇本地的圖片進(jìn)行上傳，在上傳之前會(huì)查看一下自己上傳的圖片是否準(zhǔn)確。所以要做到預(yù)覽圖片。下面就實(shí)現(xiàn)一個(gè)簡(jiǎn)單的本地圖片顯示預(yù)覽的功能~~ 1、創(chuàng)建頁(yè)面這里我直接
2024年02月03日
瀏覽(94)
微信小程序中無(wú)法顯示base64圖片
在微信小程序中展示圖片信息時(shí)，后端返回的數(shù)據(jù)中的圖片地址位base64 在小程序進(jìn)行圖片渲染后，發(fā)現(xiàn)有一部分的圖片不能成功顯示，直接為空白，但是在調(diào)試器里查看圖片地址已經(jīng)注入進(jìn) src 里面了，嘗試將圖片地址復(fù)制出來(lái)用瀏覽器打開(kāi)，發(fā)現(xiàn)可以正常顯示圖片在瀏覽器
2024年02月12日
瀏覽(25)
微信小程序使用image組件顯示圖片的方法
本文實(shí)例講述了微信小程序使用image組件顯示圖片的方法。分享給大家供大家參考，具體如下： 1、效果展示 2、關(guān)鍵代碼 ① index.wxml 代碼如下: image style=\\\"width: 300px; height: 300px; margin:10px;\\\" mode=\\\"scaleToFill\\\" src=\\\"{{imageSrc}}\\\"/image ② index.js Page({ data:{ // text:\\\"這是一個(gè)頁(yè)面\\\" imageSrc:\\\'../..
2024年02月12日
瀏覽(89)
微信小程序圖片顯示不出來(lái)的問(wèn)題 100%管用
相信大多數(shù)微信小程序的開(kāi)發(fā)者都會(huì)遇到的一個(gè)問(wèn)題就是圖片在模擬器上能顯示跑到真機(jī)上就不行，而且ios能顯示安卓卻顯示不了的問(wèn)題，這個(gè)問(wèn)題也是困擾了我很久，最終想到了解決方案。?? 大多數(shù)情況下都是后端返回一個(gè)url地址然后我們?cè)倌没鶞?zhǔn)路徑去拼接 ok這沒(méi)問(wèn)題
2024年02月16日
瀏覽(20)
微信小程序上，實(shí)現(xiàn)圖片右上角數(shù)字顯示
微信小程序上，實(shí)現(xiàn)圖片右上角數(shù)字顯示直接上代碼：樣式代碼index.wxss如下：前端代碼index.wxml如下：微信小程序的效果為： ?再分享一個(gè)html版本的css右上角顯示帶數(shù)字的圓圈的代碼效果如下： ?
2024年02月16日
瀏覽(56)
微信小程序布局圖片上面顯示文字以及文字水平垂直居中
?博主介紹：本人專注于Android/java/數(shù)據(jù)庫(kù)/微信小程序技術(shù)領(lǐng)域的開(kāi)發(fā)，以及有好幾年的計(jì)算機(jī)畢業(yè)設(shè)計(jì)方面的實(shí)戰(zhàn)開(kāi)發(fā)經(jīng)驗(yàn)和技術(shù)積累；尤其是在安卓（Android）的app的開(kāi)發(fā)和微信小程序的開(kāi)發(fā)，很是熟悉和了解；本人也是多年的Android開(kāi)發(fā)人員；希望我發(fā)布的此篇文件可以幫
2024年02月14日
瀏覽(24)
微信小程序真機(jī)不顯示圖片【三個(gè)解決方案】
今天網(wǎng)友在開(kāi)發(fā)小程序中遇見(jiàn)一個(gè)很奇怪的問(wèn)題，就是編輯器編譯后可以正常顯示項(xiàng)目圖片，但是當(dāng)真機(jī)預(yù)覽時(shí)卻不顯示圖片。針對(duì)這個(gè)問(wèn)題經(jīng)過(guò)對(duì)比、嘗試算是找到了問(wèn)題的原因。下面將最近真機(jī)不顯示的情況進(jìn)行一下匯總： 1.本地圖片文件名稱中包含中文：像上面圖片，
2024年02月12日
瀏覽(40)
微信小程序：兩層循環(huán)的練習(xí)，兩層循環(huán)顯示循環(huán)圖片大圖（大圖顯示、多層循環(huán)）
外層循環(huán) 外層循環(huán)的框架 view?wx:for=\\\"{{info}}\\\"?wx:key=\\\"index\\\"/view wx:for=\\\"{{info}}\\\" ：這里 wx:for 指令用于指定要遍歷的數(shù)據(jù)源，即 info 數(shù)組。當(dāng)遍歷開(kāi)始時(shí)，會(huì)依次將數(shù)組中的每個(gè)元素賦值給子項(xiàng)進(jìn)行展示。 wx:key=\\\"index\\\" ：在循環(huán)過(guò)程中，需要為每個(gè)子項(xiàng)指定一個(gè)唯一的標(biāo)識(shí)，以便更
2024年02月05日
瀏覽(23)
微信小程序使用本地圖片在真機(jī)預(yù)覽不顯示的問(wèn)題解決
開(kāi)發(fā)工具上本地圖片可以顯示，但是在真機(jī)上預(yù)覽的時(shí)候不能顯示通常我們代碼路徑是代碼是這樣寫(xiě)的最后發(fā)現(xiàn)路徑這樣寫(xiě)在真機(jī)預(yù)覽上無(wú)法顯示解決辦法路徑需要相對(duì)于根目錄來(lái)寫(xiě) 路徑直接使用網(wǎng)絡(luò)圖片地址寫(xiě) 這樣就可以解決真機(jī)預(yù)覽圖片不顯示問(wèn)題了。如果路徑?jīng)]有
2024年02月11日
瀏覽(100)
微信小程序上傳文件及圖片（可以預(yù)覽）
最近在寫(xiě)小程序項(xiàng)目，碰到了一個(gè)需求，需要用戶可以上傳各種類型的文件和圖片，展示在頁(yè)面上，并且點(diǎn)擊還可以進(jìn)行預(yù)覽，就找了找微信小程序官網(wǎng)，寫(xiě)了一個(gè)例子，分享一下直接看代碼： wxml: wxss: js: 有問(wèn)題和建議歡迎大家留言
2024年02月12日
瀏覽(92)