p5.js 可以繪製圖片，然而圖片哪來呢？可以透過 loadImage 指定圖片來源，Image 參考文件上是說，圖片載入來源基本上採相對路徑，想採用絕對路徑其實也是可以，只不過若圖片來源是外部網站，該外部網站的安全性設定必須能配合，像是允許外連圖片、CORS 之類。
p5.js 設定的對象是不一定精通程式開發的人，談安全性設定必須配合，對這些人來說太難了，文件就直接說來源必須指定相對路徑了。
只不過 loadImage 要寫在哪呢？setup？不！loadImage 實作為非同步，也就是說執行該函式不會阻斷流程，若寫在 setup，圖片下載完成前 setup 執行可能就完畢而馬上呼叫 draw，這樣繪圖就會有問題。
可以將 loadImage 寫在 preload 中，preload 文件中談到，這個函式能保證寫在其中的 loadImage、loadJSON、loadFont、loadStrings 等的下載作業完畢，才呼叫 setup，而除了這些有向 p5.js 註冊的函式之外，其他都別寫在 preload 中。
也就是說，你自己寫了個非同步函式，單純地就放到 preload 是沒有用的，你的非同步函式必須遵守一些規則來撰寫，而且要跟 p5.js 註冊才行，這之後有機會再來談，p5.js 官方 API，以及一些列在 Libraries 中，具有非同步下載函式的第三方程式庫，基本上都遵守這類規範了。
loadImage 會傳回 p5.Image 實例，將這個實例傳給 image 函式，就可以顯示圖片。例如：
（這邊可以透過 p5.js-widget 執行程式並取得圖片，是因為我設定了 CORS，允許來自 https://toolness.github.io 的 .js 請求我網站的資源。）
image 的第二、三個參數，預設是繪製圖片時，圖片左上角要放在畫布上哪個 (x, y)，預設會將整個圖片依原寬高畫出，在指定五個參數的情況下，第四、五個參數預設是指定圖片繪製的寬高，可以用同一個 p5.Image 來多次呼叫 image，每呼叫一次就繪製一次。
可以透過 imageMode 來改變 image 的參數意義，預設模式是 CORNER，行為就是上頭談到的；若設為 CENTER，那第二、三個參數就是指定圖片的中心點是在畫布的哪個位置；若設定為 CORNERS，第二、三個參數是圖片左上角在畫布中的座標，第四、五個參數也一定要寫出，指出圖片右上角在畫布中的座標。
直接使用以下的範例，畫出與前一個範例相同的圖比較看看：
image 還可以設定六個以上的參數，這時參數的意義又會改變，運用在需要裁剪圖片的情境，這之後再來談。