Enjin站点修改图片src路径报错：Cannot read property 'replace' of undefined

嗨，我帮你找到问题所在啦！你遇到的Cannot read property 'replace' of undefined报错，核心原因是混淆了原生DOM元素和jQuery对象的用法——jQuery包装后的对象不能直接访问src属性，这才导致了undefined的错误。

错误根源拆解 #

你代码里写的$(this).src是错误的：$(this)返回的是jQuery对象，而src是原生DOM元素的属性，直接访问会得到undefined，自然没法调用replace方法。

修正后的代码 #

把你那段修改图片src的代码改成下面这样，就能正常工作了：

$(window).on("load", function() {
  // 建议不要全局选所有img，精准定位到奖项模块的图片更稳妥
  $(".m_members img").each(function() {
    // 用jQuery的attr方法获取和设置src属性
    let oldSrc = $(this).attr("src");
    if (oldSrc) { // 先判断src是否存在，避免空值报错
      let newSrc = oldSrc.replace("/small/", "/large/");
      $(this).attr("src", newSrc);
    }
  });
});

额外优化建议 #

• 精准选择图片：全局$("img")会修改页面所有图片，可能影响其他模块，加上奖项模块的父容器选择器（比如.m_members img），只处理目标图片更安全。
• 增加有效性判断：if (oldSrc)的判断能避免部分图片无src属性时再次报错。
• 使用新的事件绑定方式：jQuery里.bind()是旧方法，推荐用.on()来绑定事件，兼容性和性能更好。

完整修正后的全部代码 #

替换成下面这段完整代码即可：

$( document ).ready(function() {
  $( "#memberBlock" ).insertAfter( "#page" );
  $( "#memberContainer" ).append($("div.m_members"));

  // 修正后的图片批量替换逻辑
  $(window).on("load", function() {
    $(".m_members img").each(function() {
      let oldSrc = $(this).attr("src");
      // 只替换包含/small/路径的图片，避免误改其他图片
      if (oldSrc && oldSrc.includes("/small/")) {
        let newSrc = oldSrc.replace("/small/", "/large/");
        $(this).attr("src", newSrc);
      }
    });
  });
});

这样应该就能顺利把所有奖项图片的小图路径替换成大图路径，正常显示大图啦！

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