自定义Instagram模板Custom Element图片src显示undefined问题

核心问题原因 #

• 属性大小写不匹配：HTML属性天生大小写不敏感，你在HTML中写的mainImg会被浏览器自动转为小写mainimg，但observedAttributes数组里声明的是驼峰式的'mainImg'，导致attributeChangedCallback无法捕获该属性的变化，this.mainImg自然不会被赋值。
• 初始挂载未读取属性：connectedCallback执行时，没有手动读取元素已有的属性值并赋值给实例变量，直接调用render会导致属性值为undefined。
• 模板未绑定变量：render方法中的模板没有将实例属性值插入到图片的src属性中，这是图片显示空白的直接原因。

修正后的代码 #

IgTemplate 类

class IgTemplate extends HTMLElement {
  static get observedAttributes() {
    // 将属性名统一为小写，匹配HTML实际解析后的属性名
    return ['username', 'location', 'caption', 'mainimg'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
    // 初始化属性默认值，避免undefined
    this.username = '';
    this.location = '';
    this.caption = '';
    this.mainimg = '';
  }

  connectedCallback() {
    // 挂载时手动读取所有观察的属性值，初始化实例变量
    this.constructor.observedAttributes.forEach(attr => {
      this[attr] = this.getAttribute(attr) || this[attr];
    });
    this.render();
  }

  attributeChangedCallback(propName, oldValue, newValue) {
    // 仅当值真正变化时才重新渲染
    if (oldValue !== newValue) {
      this[propName] = newValue;
      this.render();
    }
  }

  render() {
    // 模板中正确绑定属性值到img的src
    this.shadowRoot.innerHTML = `
      <style>
        .ig-template {
          width: 300px;
          border: 1px solid #ccc;
          border-radius: 8px;
          overflow: hidden;
        }
        .user-info {
          padding: 10px;
          display: flex;
          gap: 10px;
          align-items: center;
        }
        .ig-template img {
          width: 100%;
          height: auto;
        }
        .caption {
          padding: 10px;
          margin: 0;
        }
      </style>
      <div class="ig-template">
        <div class="user-info">
          <strong>${this.username}</strong>
          <span>${this.location}</span>
        </div>
        <img src="${this.mainimg}" alt="Instagram post content">
        <p class="caption">${this.caption}</p>
      </div>
    `;
  }
}

customElements.define('ig-template', IgTemplate);
export default IgTemplate;

AppContainer 类

class AppContainer extends HTMLElement{
    constructor(){
        super();
        this.attachShadow({mode: 'open'});
    }

    connectedCallback(){
        this.render();
    }

    render(){
        this.shadowRoot.innerHTML = `
        <ig-template 
          username="a.solarte1" 
          caption="Final MIC 2022" 
          location="Estadio de Palamós" 
          mainimg="./assets/mainImg.png"> <!-- 改为小写属性名 -->
        </ig-template>
        `;
    }
}

customElements.define("app-container",AppContainer);

关键修改说明 #

1. 属性名统一小写：确保observedAttributes中的属性名与HTML中实际存在的属性名一致，避免浏览器自动转小写导致的不匹配。
2. 初始化实例属性：在connectedCallback中手动读取属性值，保证元素挂载时就能获取到正确的属性值。
3. 模板变量绑定：在render的HTML模板中，通过模板字符串将this.mainimg赋值给图片的src属性，实现动态渲染。
4. 避免无效渲染：在attributeChangedCallback中增加值变化判断，减少不必要的DOM更新。

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