# 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.

```xml
<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](http://bunny.net) - [https://share.getcloudapp.com/bLuARKwx](https://share.getcloudapp.com/bLuARKwx)

Here's a full source code :

```xml
<!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.*
