Add image example to monaco.ts

[leoj3n]

This makes the default example more beginner friendly in that it:

• Reiterates import syntax with a more obviously external library name.
• Shows simpler import syntax for a library with a default export.
• Shows how to use attribute expressions (demonstrates necessary lack of quotes around the attribute value).
• Shows how to use JS template literals/strings for an attribute expression with increasing robustness.

Live example:

https://astro.build/play#EQegDghg5gpgziACtGA6CcAuAnA9sALmABkBFAC1IFE4AxOAQQGMAJOAYSYYFcH2GAzFACyAdwBaDcrigA3ON1nEAUsKgB5UgwC2vMHHVQWATQAi6yQIBCphgEsREAJ6iGAJgYBlAEqirALwhcAAZiWk9xFlk3K284XABWbQBGBisANlomKFMAR2TEACtgwoA1AGs7AHU1dnZC72FSdipcgE5vWULyKgBqKFpiYwYAI0wcgGkADXU2qy0nSQZchmUAdlJk9ZgJhgYqgtMAVQZTABUASQAWRFIAcWDshm9iMFE2gDkz4ImLgA8YFdTFcGAATO4AOyqUEiUCuOW4VxYfwAHE5EHtsHBykdClMRsFRHYIekGFQIB9MN5SMpZJ5CuJiIU7sonMY7GB0lQIcY2iN2B87B8GMRvFUTrlcP50uU3MR0iMISNjAIpn87FdkgILmkLlYRTq1CMjsIWKJgk4PgIMLQjtgINoTsZcMlkk51AkrNwqq4GCiGLQ-gAbTy-bwQYRUWi5dh2UTEOzCC7YYzCfxUC7tABmuFyLDsf2GKJg5CY0F63iguUi2iqDCu5XIkV+F20UCO7CucD+iEQYBR3lMd28DCgCT2VCOMADCXKH3KuTATgge127COIxYYAmLG8-g+4ghLl4TFod1IsjEKKsRPYtrA4jsXkk3BguG4TgYuHcpFIpQ+pBVKQFzmBcajlFYViFFQ3hrOUoLiKYtCgh8UBnPMKJBlQnjcKQwjlBm0HeGcoLJLQtAjPqoi0HsVhXBc4gZFAKLqJgTglOUwRQAwvRHKYDGxOkhTGLGYBtH2QrpIOxgsG43gjKYoimBAerqNgDATFmwynOQZwQCM6ZMKQbTlOoTigsIYCaHsRwsOUtDkMI3jaJQFxOGAVRXOQbjBAIKJuMYUDkOoKICBCuCYNofy5OQygCIgpjiKUuAsAIbglqY5TsG4EzcCibSyLkVCmFAsTxlQ3ATG4AgwE4MDIncYAZFEbQok23BWOQtzjgkFwfOwWalJ4zoALRtKIVykL8wgigksiYDAshrKIiC9LkVw3AwoixTN5CFKQZl8DN7BwAm3i0FYTDpMYxDwaYxjKAwVJWGZfzkGsZpVCwFwsFAExrGAOJtOwrhXBAVhHFM2jCLQohZqQaw6gw-jlDA2jBIluT1aQuAjFQWVMEcKL8HxVBKaIHzaFcAofL0oIjKQxDcIUW6YMEMRcAwyQaCi-jBPMiMME0Gk6uwTjpBA5DcOUDB3H87CgsEFzlPLpYQhcFyiCNJWZm4MsZq+3hBrQ-h2OowTpP45DaBMUBMtoZzGN4TYXVYxDaP44i9GcVC4FOpQMBCmzzOUojKHY4gjLQYBqMEniyOQdTiMk5RBpgELUaI7DGKQQbsEmuTCCij6iIYaRVHYGtJhM5AosQW1xthygTLguDxoU+dBnATilNo5RKlQaiYFMyTGG4vQJHE5DLhCHwRUcygfMkjBVOw6jlGc91-FQDOmOkpj+G4UDaJgVDqAwXxXN4dh2CM2D59oaS5TL31MNgTWPHYwykFAYAJGAFwLJtimFnXA5QqjYFyMfXATgIQTHKMQI4AttDYDNvzRAWZtBZh+M5YIUxI5BhjDATApBIKFFwEwAQLdaLlAuPUdILBI5nC7NxBg5Qbj9FIBjKgnZTBYKJgkXIxgRpOCcOwbALBMClFVvxMAtBlDFSqBcW4vRzyFiYJGC4rVgi5BAiwbQvRe64AzhMWgFxPSeFoOUCAvRArCBGMoGWDBgBAA

[netlify[bot]]

✔️ Deploy Preview for astro-repl ready!

🔨 Explore the source changes: 432500bb6813b78f8357ac2e3ac74aa51eeb5222

🔍 Inspect the deploy log: https://app.netlify.com/sites/astro-repl/deploys/620ab03a84d43700079a3b28

😎 Browse the preview: https://deploy-preview-22--astro-repl.netlify.app

[okikio]

I like the idea of this pr, but in it's current state it isn't very good for rapid live edits. Every time devs make a change, the resulting page reloads causing a different random unsplash image to show up, this would cause Unsplash's server to get bombarded with requests.

[leoj3n]

Agreed, perhaps add a comment to demystify where the format library is coming from, and then use an existing variable to demonstrate attribute usage. At first I thought the package might be a core part of Astro, and got hung up trying to set attributes with quotes, as well as not sure how to concatenate strings to attributes set with variable, so those are the beginner issues I was trying to help address here if possible, which I think can be done without the image library (was just the example I had set up for myself).

[okikio]

Sure, I'll add that