Angular app using cloudinary image component not updating alt tags

jsch15
jsch15 Member Posts: 6
edited August 28 in Developer APIs

Hi,

I have an angular app using CloudinaryImageComponent <advanced-image> and update the image when a user selects something they want to see. structured like this

— cldImage.component —

<advanced-image …. [alt]=alt></advanced-image>

— customcomponent.component —

<cldImage … [alt]=alt></cldImage>

I see the alt tag change in devtools on the advanced image but the img tag produced from CloudinaryImageComponent does not update the alt tag. I have no issues with the image changing, just the alt tag changing

output:

<cldImage ng-reflect-alt="altTag2">

<advanced-image ng-reflect-alt="altTag2>

<img alt="altTag1">

</advanced-image>

</cldImage

Tagged:

Comments

  • Zachary
    Zachary Member, Cloudinary Staff Posts: 46

    Hi there,

    Does changing your syntax to alt="{{dynamicText}}" fix the issue?

  • jsch15
    jsch15 Member Posts: 6
    edited August 28

    it does not! you can see here i started with 1 then selected 2 and the advanced image is reflecting that change but img from there isnt updating. it updates when the page loads but when i select new content it doesnt update. (ignore the …. its for privacy) @Zachary

  • Tom
    Tom Member, Cloudinary Staff Posts: 112

    Hi @jsch15 ,

    Thanks for replying.

    So this is looking like bug so I've opened an internal ticket for our SDK team to investigate this further.

    I do not have an ETA currently but we will update you as soon as we know more.

    Please let me know if you have any other questions or queries.

    Kind Regards,

    Thomas

  • jsch15
    jsch15 Member Posts: 6

    thank you so much! I’m also having trouble sending an empty alt tag through the same way. It shows on the advanced image tag but doesn’t show any alt on the img tag created from there. @Tom

  • Tom
    Tom Member, Cloudinary Staff Posts: 112

    @jsch15 thanks for the update, that's probably related as well and I will make sure to mention it internally.

  • Stephen
    Stephen Member, Cloudinary Staff Posts: 33

    Hi,
    Our team released @cloudinary/ng version 2.1.0 today with several fixes including one which should resolve this issue. Please let us know if you're still seeing issues with the new version
    Regards,

    Stephen

  • jsch15
    jsch15 Member Posts: 6

    @Stephen @Tom

    Thank you so much! I upgraded to 2.1.0 today and tested these two items above. The original problem displaying the incorrect alt tag when dynamically switching images is fixed thank you so much!

    However the second problem is still there. When I send an empty alt attribute through advanced-image it doesn't end up on the <img> created from there so I'm unable to use decorative images with empty alts for accessibility. I tried various ways of syntax and it is not fixed from that either. i.e. [alt]="''" and alt="" and [alt]="{{variableEqualToEmptyString}}" It seems like alt only passes non empty values.

    Yall are so great for taking these items in and getting them fixed and following up, we really appreciate it!

  • Cloudinary Team
    Cloudinary Team Administrator, Cloudinary Staff Posts: 172 admin

    Hey,

    Thanks for replying.

    We'll check that and get back to you soon.

    Please let me know if you have any other questions or queries.

    Kind Regards,
    Thomas
    Developer Support Engineer
    Cloudinary


    🧑‍🎓 Academy Training | 📖 Documentation | 📰 Blog

  • Tom
    Tom Member, Cloudinary Staff Posts: 112

    Hi @jsch15 ,

    Thanks for waiting.

    We have deployed version 2.1.1 which has the fix for passing empty alt tags.

    Please update to the latest version and let us know if it works.

    Kind Regards,

    Thomas