這篇文章將為大家詳細(xì)講解有關(guān)微信小程序如何使用image組件顯示圖片，小編覺得挺實(shí)用的，因此分享給大家做個(gè)參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是專業(yè)的奉新網(wǎng)站建設(shè)公司，奉新接單;提供網(wǎng)站制作、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計(jì),網(wǎng)站設(shè)計(jì),建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行奉新網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

微信小程序使用image組件顯示圖片的方法

可以看到，image這個(gè)組件有四個(gè)屬性，這次針對mode屬性和我所做的小程序中用到的圖片結(jié)合講一下。

按照官方的mode，分為兩類：一類縮放，一類裁剪。

我所做的pixiv是需要大量圖片的網(wǎng)站。P站供畫手們上傳自己的作品。圖片有大有小，按照這個(gè)，我們要做的可以分成兩種

1、對上傳上來的圖片進(jìn)行縮放（一般是縮小），放進(jìn)我們規(guī)定好大小的格子中。

2、對上傳上來的圖片進(jìn)行裁剪，假設(shè)我們只需要整張圖片的中間部分就可以了。

因?yàn)樯鲜龅倪@兩點(diǎn)還要針對小程序中的view組件和scroll-view組件區(qū)分，這個(gè)涉及到了對image的width的設(shè)定，現(xiàn)在先講最普通的view組件。（對于scroll-view中出現(xiàn)的圖片， 也會出現(xiàn)滾動(dòng)軸的情況，鏈接在此：scroll-view中，image組件出現(xiàn)滾軸）

如圖，現(xiàn)在我有一張這么大的圖片，我只要放進(jìn)這么小的格子里面。（看紅框）

按照分類點(diǎn)，我們來講第一點(diǎn)（縮放）我做的時(shí)候出現(xiàn)的問題。

（看下圖）這個(gè)小格子并沒有規(guī)定大小，它是一個(gè)weui-flex__item，也就是flex:1（在這里就是占據(jù)了整個(gè)橫面的50%）。對于image這個(gè)組件本身，我設(shè)置了width:100%（待會來看看如果把這個(gè)100% 去掉會怎樣）。對于我們要調(diào)整的這張圖片，首先我們明確了是縮放，也就是從scaleToFill、aspectFit、aspectFill、widthFix這四個(gè)值中取。下面就是四種對應(yīng)顯示的樣子（看圖）。

乍一看，scaleToFill和aspectFill就是我們要用的，但是感覺好像scaleToFill和aspectFill沒有區(qū)別，展示的效果都是一樣一樣的。這就得說回我們剛才說的，有沒有給image組件設(shè)置了width:100%的問題，下面就針對有無100%來區(qū)分。

1、有設(shè)置image的width:100%

一開始我做的時(shí)候，是沒有給圖片設(shè)置width為100%的，于是出現(xiàn)了滾動(dòng)軸，還特別奇怪。調(diào)試一看，原來是圖片原本的320px的寬度已經(jīng)超出了格子的寬度，并且image組件自己已經(jīng)設(shè)定好overflow:hidden（如圖，沒有設(shè)置width為100%的時(shí)候image的width）

1、效果展示

2、關(guān)鍵代碼

① index.wxml

② index.js

Page({
 data:{
 // text:"這是一個(gè)頁面"
 imageSrc:'../../pages/image/img.jpg'
 }
})

使用aspectFill或者scaleToFill好還是給image的width設(shè)置為100%，就不會在圖片下方出現(xiàn)橫滾動(dòng)軸啦

關(guān)于“微信小程序如何使用image組件顯示圖片”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯(cuò)，請把它分享出去讓更多的人看到。

網(wǎng)站欄目：微信小程序如何使用image組件顯示圖片-創(chuàng)新互聯(lián)
文章位置：http://weahome.cn/article/cdhegi.html