p5.js调用loadImage()与image()加载背景图片不显示问题

background.png无法加载显示的核心原因是index.html中缺失p5.js 1.4.0版本的CDN引入脚本，缺失库依赖会导致所有p5.js提供的API（包括图片加载、画布创建相关方法）无法正常执行。

• 开发环境：VS Code，基于JavaScript + p5.js库开发，目标是实现加载本地图片作为画布背景
• 前期排查操作：最初script.js与background.png存放在同一父目录下的不同子文件夹中，为排查路径引用错误，临时将所有相关文件调整至同一目录
• 异常表现：文件路径调整正确后，background.png始终无法在画布渲染，且相同的preload()预加载、setup()初始化阶段调用loadImage()和image()的写法，此前运行完全正常

对应的script.js代码如下：

let BG;

function preload() {
    BG = loadImage('background.png');
}

function setup() {
    createCanvas(200,200);
    image(BG,0,0,100,100);
}

在index.html中，引入自定义script.js脚本的标签之前，添加p5.js 1.4.0版本的CDN引入标签即可：

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.min.js"></script>

注意：脚本引入顺序不能颠倒，必须先加载p5.js官方库，再加载自己编写的业务脚本，否则p5全局方法无法被识别，功能依旧会失效。

内容的提问来源于stack exchange，提问作者Nessle