微信小程序如何使用image組件顯示圖片

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

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

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

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

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

1、對上傳上來的圖片進行縮放（一般是縮?。?，放進我們規定好大小的格子中。

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

因為上述的這兩點還要針對小程序中的view組件和scroll-view組件區分，這個涉及到了對image的width的設定，現在先講最普通的view組件。（對于scroll-view中出現的圖片， 也會出現滾動軸的情況，鏈接在此：scroll-view中，image組件出現滾軸）

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

按照分類點，我們來講第一點（縮放）我做的時候出現的問題。

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

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

1、有設置image的width:100%

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

1、效果展示

2、關鍵代碼

① index.wxml

<image style="width: 300px; height: 300px; margin:10px;" mode="scaleToFill" src="{{imageSrc}}"></image>

② index.js

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

使用aspectFill或者scaleToFill最好還是給image的width設置為100%，就不會在圖片下方出現橫滾動軸啦

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