自定义元素 - 图像源未定义

Question

I´m creating a customElement for a Instagram template, and i´m trying to make the image src a variable in order to change it as you want. And when i'm stating the attributes im calling correctly where the image is. When I load the page the image doesn't charge and when I inspect the code it says that the image src it's undefined.

class IgTemplate extends HTMLElement {

  static get observedAttributes() {
    return ['username', 'location', 'caption', 'mainImg'];
  }

  constructor() {
    super();
    this.attachShadow({ mode: 'open' });
  }
  
  connectedCallback() {
    this.render();
  }

  attributeChangedCallback(propName, oldValue, newValue) {
    this[propName] = newValue;
    this.render();
  }

  render() {
    this.shadowRoot.innerHTML = `
    <link rel="stylesheet" href="./src/components/Igtemplate/style.css">
    <section>
    <div class="page">
<div class="above">
    <div class="userInform">
        <div class="userImg">
        <img src="./assets/profile-icon.png" alt="" class="cover">
        </div>
        <h3>${this.username}<br><span>${this.location}</span></h3>
    </div>
    <div>
    <img src="./assets/three-dots.png" alt="" class="menu">
    </div>
</div>
<div class="mainPics">
    <image class="cover"src="${this.mainImg}">
</div>
<div class="theButton">
    <div class="left">
        <img src="./assets/like-icon.png" alt="" class="btnLike">
        <img src="./assets/comment-icon.png" alt="" class="btnComment">
        <img src="./assets/share-icon.png" alt="">
    </div>
    <div class="rigth">
        <img src="./assets/save-icon.png" alt="" class="btnSave">
    </div>
</div>
<h4 class="likes">420.389 likes</h4>
<h4 class="captions"><b>${this.username} </b>${this.caption}</h4>
<h4 class="comments">View all 348 comments</h4>
<div class="addComment">
    <div class="userImg">
        <img src="./assets/profile-icon.png" alt="">
    </div>
    <input type="text" class="theComment" placeholder="Add a comment..."></input>
</div>
<h5 class="time">28 minutes ago</h5>
</div>
    </section>` 
  }
}

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

And here is the other part

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>

        <br>
        
        <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);

Here´s what I see on screen:

Answer 1

In your IgTemplate class you forgot to inisilialise the image for the first time, you can do that easily in the constructor

class IgTemplate extends HTMLElement {

  constructor() {
    super();
    this.mainImg = "./assets/mainImg.png";// put the src of the default/starting image
    this.attachShadow({ mode: 'open' });
  }

When the attribute of an object is never set, it stays undefined !

Answer 2

Problem

this.mainImg is undefined , and you never set it.

Why?

Attributes are always all-lower case, so in your attributeChangedCallback the mainImg attribute comes in as mainimg (doesn't matter which case you provided in observedAttributes ), hence you are setting this['mainimg'] (and not this['mainImg'] ). For Object property names (and variables) case matters in JS.

How to fix

So rename your attribute to mainimg , and adjust your template:

<image class="cover" src="${this.mainimg}" />