P5.js图片下拉菜单开发：图片加载报错求助

问题排查与修复点： #

1. 文件名拼写错误：代码中drum1 = loadImage('drum1.jgp');的后缀是错误的jgp，应为jpg，这会直接导致图片加载失败。
2. 图片路径匹配问题：若未将本地图片放置在项目对应目录，或使用在线编辑器，直接使用提供的图片网络地址加载更可靠，避免本地路径问题。
3. 选项与判断逻辑不匹配：
   • 下拉选项为two hand drums，但判断条件写的是two hand drum（缺少末尾的s）
   • 下拉选项为Talking drum，判断条件用的是talking drum（大小写不一致），导致匹配失败
4. 未定义变量错误：draw函数中的trim变量未声明，应替换为已定义的drumType。

修正后的完整代码： #

let picker; 
let drum1, drum2, drum3, drum4, drum5;
let img;
let drumType = 'what';

function setup() {
    createCanvas(windowWidth, windowHeight);

    // 使用提供的图片地址加载，避免本地路径问题
    drum1 = loadImage('https://i.sstatic.net/pBc7dLXf.jpg');
    drum2 = loadImage('https://i.sstatic.net/YkgaDzx7.jpg');
    drum3 = loadImage('https://i.sstatic.net/UmXUufqE.jpg');
    drum4 = loadImage('https://i.sstatic.net/E49GT3SZ.jpg');
    drum5 = loadImage('https://i.sstatic.net/vJycb3o7.jpg');

    textAlign(CENTER);
    background(200);
  
    picker = createSelect();
    picker.position(10, 10);

    picker.option('djembe');
    picker.option('two hand drums');
    picker.option('one hand drum');
    picker.option('Talking drum');
    picker.option('five hand drums');
   
    picker.changed(pickEvent);

    img = drum5;
}

function draw() {
    background(200, 220, 10);
    textAlign(LEFT);
    image(img, 0, 0, width, height);
    // 替换未定义的trim为drumType
    text(drumType + ' is a good drum', 10, 50);
}

function pickEvent() {
    drumType = picker.value();
        
    if (drumType === 'djembe') {
        img = drum1;
    } else if (drumType === 'two hand drums') { // 修正选项文本匹配
        img = drum2;
    } else if (drumType === 'one hand drum') {
        img = drum3;
    } else if (drumType === 'Talking drum'){ // 修正大小写匹配
        img = drum4;
    } else  {
        img = drum5;
    }
}

内容的提问来源于stack exchange，提问作者K-PopCorn