Using AJAX to load an image in the background

Ever tried loading an image using AJAX/fetch?

Here's a super simple example with AlpineJS parsing an IMG's src value as JavaScript. It can't get simpler than this.

<div x-data="{}">
    <img :src="await(await fetch('https://domain.com/myImage.jpg')).url" />
</div>

You'll have to add cors origin like the way it's done at bunny.net - https://share.getcloudapp.com/bLuARKwx

Here's a full source code :

<!DOCTYPE html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />    
    <title>Using AJAX to load an image in the background</title>
    <script src="https://unpkg.com/alpinejs@3.13.2/dist/cdn.min.js" defer></script>
</head>
<body>
    <div x-data="{}">
        <img :src="await(await fetch('https://anjanesh.b-cdn.net/island.jpg')).url" />
    </div>
</body>
</html>

Note the .url and the end of the closing await.

the .url is used to get the URL of the response obtained from the fetch operation, and it's accessed using await because fetch returns a promise.

Using AJAX to load an image in the background

Comments

More from this blog

Styling the NumberFormat in JavaScript

Using getters and setters Part 3

Image PopUp / Photo Gallery using PhotoSwipe

Using getters and setters Part 2

How to access AlpineJS Data variable outside scope

Command Palette

Comments

More from this blog