Can you directly use the errer slot to achieve it

Can you directly use the errer slot to achieve it

Of course, it's simple.But the point should be that it should respond to click regardless of whether it is loaded incorrectly, rather than ignoring it in another way.This problem still exists.

After reading the source code, I found that the image component sets the attribute inheritance inheritAttrs to false, and explicitly uses useAttrs to bind the variable to the img element instead of the outer div. This will cause the outer layer to fail to get the click, contextmenu and other events normally. Only when the inner img element is loaded correctly can the event bubble mechanism be used to capture the event correctly. I don't think useAttrs should be bound to the img element directly, so that although some properties passed to the image can be directly obtained, some events passed externally cannot be triggered when the image is loaded (placeholder slot) or when the image fails to load (error slot).

In addition, I believe that the solution to this problem should not be to add click to the el-image and then register the same click on the error slot.

solution

• inheritAttrs: true , but there are only a few attributes of the img element inside, just register them one by one.
• Without changing inheritAttrs , the code maintains event-related property objects separately, v-bind="containerAttrs" is bound to the external container, and'img' unbinds these events to avoid multiple triggers.

@tolking, what do you think? If you agree, I will submit pr to solve it, thanks.

TIP

The useAttrs function has a parameter excludeListeners

TIP

The useAttrs function has a parameter excludeListeners

Thx,i didnt know before.