Image do not show the AWS s3 url image

I think I do have actual value set in to the src field in image component.
I set the data into src field by using javascript transformer return url.

Screenshot 2023-08-08 at 1.46.28 PM
I do get the value in imagePreview.value. ImagePreview is a transformer.

Screenshot 2023-08-08 at 1.46.42 PM
Image do not appear in the field.

However, the image cannot show up. I do try that directly put the AWS s3 image url into src field and it works. Not sure why happen in here.

Any comments will be appreciated!! thx

Hello, is this link right? can you post your image src link?
https://stg-client-management-service-public.s3.amazonaws.com/clients/17/images/2023-08-08%2005:23:54.992700-84626123-963b-4066-9a3d-dc314bfc934d.png
I visit it with error.

Is your image with public access in S3?

@jackLai Welcome to the forum!
Is it a signed URL?

That's just the object URL and is not accessible without the proper signature. Your URL will look something like this:
https://stg-client-management-service-public.s3.us-west-2.amazonaws.com/clients/17/images/2023-08-08%2005:23:54.992700-84626123-963b-4066-9a3d-dc314bfc934d.png?response-content-disposition=inline&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEO3%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLWVhc3QtMiJGMEQCIFXH4S9FAmGlhltQ6JI0jTbtVdwJXq8VnssCd8RNT%2F%2FJAiB4jhePs7Y1RfzJ2MTx42033T6L3BzQjHv6qISYqiIJfirtAgiX%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F8BEAMaDDgzMjgyNzE3NjQyNCIMzw2XbVUlYh72dkxpKsEC%2BXTlk%2B6AFiv2Hi1rHAxgfHyYJkQyEFMhBr4YGfbQaozg4CrtlFhg6ItNG%2F1XM0Rj%2Fk%2F73TX%2FF8MsdfdgOtMEZMxf6YwG%2BMI8XNiyoxrodjod1ulmbQJi6T4dgMT36RJrmKJyZ5ywudjDscRPIWaQhjiQjVZnDux8EM88Zt2dFdj4RgxXFap%2BCyRm3NWOmsE%2BMIe07eGvzEHaf7MtQ8zA8o6H52TK7qqwarzwwSsD0YKNvGoQV6CAHO5K75oiHkXCR%2BvjAxtslm2I787hIOKvOo6MYh6Ix%2FXa%2BZubTnwGGlz%2BTGoJnW6r6mutbZeCdfIo7vC0LTEIV22TSMxiynnisXXdiQnYGXjtlIgpFXpjMNZmmm5ME%2BonS47z90HycZX8UFS8BxlQzmakW0LmpIB31UEmUEmzHl5r7BFiskNdHrR%2BMPnlyqYGOrQC2v5%2BeDL%2BzNzta4gnEGaej9%2F4VoxdemcJrjKJcXmq937IOls%2F0NmfRC5bfcyEBgFJh6WUvLxv%2BgwHUMb1pqSDvII6WbmGLnJQkXbLk9x7LVlnrFXbnwvjZ4OS%2F%2FWKImdPio1MiLIMV1%2FrjwtaW0Bi%2Bt7%2F1phKEbryb56JeIzfRJUSMJ6vtE0abbrUTgNJ2HpFLo8kO%2FEUbbWmsjCFOrmTEH7C%2Bee1OINnlZS86ZewN%2BkLf6JJ2aAddkixPSRlSJ4PQTJW7Rqd7PlwstGmoid1MQv67QcZtU12M1tsrLWMFKbL6VQucSeUueu4dnS04tVyNBbqdzxWMxZYBowStp3PlgNB%2FAnpqFpLaFaOdL7QTrtfRFEuAC9%2BXCWN7X%2BcC3KAUc4d7jqXnn2fuj%2Fsxy%2By8pftFlg%3D&X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Date=20230808T213328Z&X-Amz-SignedHeaders=host&X-Amz-Expires=300&X-Amz-Credential=ASIA4D2C6GXUEXML275M%2F20230808%2Fus-east-2%2Fs3%2Faws4_request&X-Amz-Signature=414219672be24eacc41e7d84cb25d444719d812f5330a2418f1aa7e346f9e225

Check this page out for more details.

Thanks for all the comments.
I found the issue. The issue is my public url contains "space" which is not acceptable for URLs. URL encoding normally replaces a space with a plus (+) sign or with %20. Therefore, I use replace function to replace " " to "+" and it works.
I think the url field of image componenet is accept the string type. So, url field will not automatically parse to url format for us? (maybe?) not sure about that.

Best,

2 Likes

Thanks for letting us know the solution, @jackLai! You're correct that the field will not automatically parse to url format-- it only checks for the string data type (and either a url or base64)