Custom Web Component image not showing

N

2

1

I have been working through a yt tutorial on Web Components by Brad Traversy, a great teacher with great content, as I'm sure many of you already know :)

I've gotten up to the 17 minute mark, though the problem I'm having is that the images are not displaying as they are in the tutorial...

They are being added to the document flow... I can tell this because the layout re-adjusts to accommodate the space for an image... it's just that the image is not displayed...

Just for comparison, I added a image of a similar nature directly in the html and it works fine.

Anyway, here is my code...

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Web Components Example</title>
  <style>
    h3 {
      color: purple;
    }
  </style>
</head>
<body>
  <h3>Hello World... where's the images?!?!?</h3>
  
  <!-- <user-card name="you oddo" avatar="https://randomuser.me/api/portraits/men/1.jpg"></user-card> -->

  <user-card name="huik popp" avatar="38.jpg"></user-card>

  <user-card name="som otha"></user-card>

  <img src="95.jpg">

  <style>h3 {color: green}</style>

  <script src="userCard.js"></script>
</body>
</html>

and the Javascript... UserCard.js:

const template = document.createElement('template');
template.innerHTML = `
  <style>
    h3 {
      color: coral;
    }
  </style>
  <div class="user-card">
    <img />
    <div>
      <h3></h3>
    </div>  
  </div>
`;

class UserCard extends HTMLElement {
  constructor() {
    super();

    this.attachShadow({ mode: 'open'});
    this.shadowRoot.appendChild(template.content.cloneNode(true));
    this.shadowRoot.querySelector('h3').innerText = this.getAttribute('name');
    this.shadowRoot.querySelector('img').innerText = this.getAttribute('avatar');
  }
}

window.customElements.define('user-card', UserCard);

I'd appreciate any help with this very much. I've been enjoying following along with this tutorial so far and well, would like to keep up with how things look in the video.

Many thanks.

Norsworthy answered 8/12, 2020 at 22:19 Comment(0)

N

0

I'm answering my question here...

In userCard.js, I have:

this.shadowRoot.querySelector('img').innerText = this.getAttribute('avatar');

It should be:

this.shadowRoot.querySelector('img').src = this.getAttribute('avatar');

Norsworthy answered 8/12, 2020 at 22:56 Comment(1)

That's interesting because I just ran into a similar issue where my images are not loading. However, my images STILL do not load even though my script is straight up copied from his working codepen example, and I'm just referencing the script inside of the html page I similarly copied. Other parts are displaying fine though. – Cocklebur 3/2, 2021 at 14:51

P

0

Tell Brad he can shorten the code to:

class UserCard extends HTMLElement {
  constructor() {
    super()
      .attachShadow({ mode: 'open'})
      .innerHTML = `
  <style>
    h3 {
      color: coral;
    }
  </style>
  <div class="user-card">
    <img />
    <div>
      <h3></h3>
    </div>  
  </div>
`;

...

  }
);

Pruinose answered 9/12, 2020 at 8:45 Comment(0)

Recommended topics

Hot tags