kirbydesign/designsystem

[Enhancement] Kirby Avatar should handle broken links

Closed this issue · 2 comments

jvh2 commented

Describe the enhancement

Kirby avatar component should handle broken link for attribute [imageSrc] with an error handle event

Describe the solution you'd like

Kirby avatar component is expanded with a onerror event handler to handle broken links in [imageSrc].
Therefor we would like the kirby avatar component to be expanded with an error event handler.

Have you considered any alternatives?

Are there any additional context?

Checklist:

The following tasks should be carried out in sequence in order to follow the process of contributing correctly.

Refinement

  • Request that the issue is UX refined
  • Request that the issue is tech refined; do not proceed until this is done.

Implementation

The contributor who wants to implement this issue should:

  • Make sure you have read: "Before you get coding".
  • Signal to others you are working on the issue by assigning yourself.
  • Create a branch from the develop branch following our branch naming convention.
  • Publish a WIP implementation to Github as a draft PR and ask for feedback.
  • Make sure you have implemented tests following the guidelines in: "The good: Test".
  • Update the cookbook with examples and showcases.

Review

Once the issue has been implemented and is ready for review:

  • Do a self-review.
  • Create a pull-request. If you created a draft PR during implementation you can just mark that as "ready for review".
stale commented

This issue has been automatically marked as stale because of no recent activity. It will be closed in 10 weeks if no further activity occurs. Thank you for your contributions.

Fuzzy3 commented

Tech Refinement
As suggested the kirby-avatar should be extended with an onerror handler for the img within the avatar.

The native error handling is described here

As written in the error handling section of img elements in the mdn-site, there are multiple causes that may trigger the onerror. In that regard we intend to emit the full ErrorEvent since the consumer of this may need different information based on the cause of the error.

The event will be distributed through an EventEmitter<ErrorEvent> attribute: imgError which may be set on the kirby-avatar component to receive a callback when the img src returns an invalid image.