files/en-us/web/api/htmlimageelement/crossorigin/index.md
{{APIRef("HTML DOM")}}
The crossOrigin property of the {{domxref("HTMLImageElement")}} interface is a string which specifies the Cross-Origin Resource Sharing ({{Glossary("CORS")}}) setting to use when retrieving the image. It reflects the `` element's crossorigin content attribute.
A string whose value is one of anonymous or use-credentials. For their meanings, see the HTML crossorigin attribute reference.
In this example, a new {{HTMLElement("img")}} element is created and added to the document, loading the image with the Anonymous state; the image will be loaded using CORS and credentials will be used for all cross-origin loads.
The code below demonstrates setting the crossOrigin property on an `` element to configure CORS access for the fetch of a newly-created image.
const container = document.querySelector(".container");
function loadImage(url) {
const image = new Image(200, 200);
image.addEventListener("load", () => container.prepend(image));
image.addEventListener("error", () => {
const errMsg = document.createElement("output");
errMsg.value = `Error loading image at ${url}`;
container.append(errMsg);
});
image.crossOrigin = "anonymous";
image.alt = "";
image.src = url;
}
loadImage("/shared-assets/images/examples/balloon.jpg");
<div class="container">
<p>
Here's a paragraph. It's a very interesting paragraph. You are captivated by
this paragraph. Keep reading this paragraph. Okay, now you can stop reading
this paragraph. Thanks for reading me.
</p>
</div>
body {
font:
1.125rem/1.5 "Helvetica",
"Arial",
sans-serif;
}
.container {
display: flow-root;
width: 37.5em;
border: 1px solid #d2d2d2;
}
img {
float: left;
padding-right: 1.5em;
}
output {
background: rgb(100 100 100 / 100%);
font-family: "Courier New", monospace;
width: 95%;
}
{{EmbedLiveSample("Setting the crossorigin attribute", 600, 260)}}
{{Specifications}}
{{Compat}}