Overview
Fetch a resource and return it as a Data URL. SVG resources are encoded as
data:image/svg+xml;utf8,..., other resources use base64 encoding.Signature
fetchDataURL(url: string | URL): Promise<string>
| Parameter | Type | Description |
|---|---|---|
url |
string | URL |
URL string or URL object of the resource to fetch. |
Returns:
Promise<string> — Data URL string.Example
Result:
Click the button to fetch
<div class="mb-3">
<label class="form-label">Image URL</label>
<input id="fetchDataURLInput" class="form-control form-control-solid" value="../../assets/media/logos/metronic.ico" readonly>
</div>
<button id="fetchDataURLBtn" class="btn btn-primary mb-3">Fetch Data URL</button>
<div>
<span class="fw-bold">Result: </span>
<code id="fetchDataURLResult" class="text-break" style="word-break:break-all;">Click the button to fetch</code>
</div>
document.getElementById('fetchDataURLBtn').addEventListener('click', async function() {
var resultEl = document.getElementById('fetchDataURLResult');
resultEl.textContent = 'Loading...';
try {
var dataUrl = await metronicExtension.utils.fetchDataURL(
document.getElementById('fetchDataURLInput').value
);
resultEl.textContent = dataUrl.length > 100
? dataUrl.substring(0, 100) + '...' : dataUrl;
} catch(e) {
resultEl.textContent = 'Error: ' + e.message;
}
});