generated from polymech/site-template
81 lines
1.8 KiB
JavaScript
81 lines
1.8 KiB
JavaScript
// @ts-check
|
|
|
|
import getAttributesString from "./getAttributesString.js";
|
|
|
|
export default function getImgElement({
|
|
src,
|
|
alt,
|
|
sizes,
|
|
style,
|
|
srcset,
|
|
loading,
|
|
decoding,
|
|
imagesizes,
|
|
fadeInTransition,
|
|
layoutStyles,
|
|
imgAttributes,
|
|
imgClassName = "",
|
|
}) {
|
|
const {
|
|
class: customClasses = "",
|
|
style: customInlineStyles = "",
|
|
onload: customOnload = "",
|
|
...restImgAttributes
|
|
} = imgAttributes;
|
|
|
|
const attributesString = getAttributesString({
|
|
attributes: restImgAttributes,
|
|
element: "img",
|
|
excludeArray: [
|
|
"src",
|
|
"alt",
|
|
"srcset",
|
|
"sizes",
|
|
"width",
|
|
"height",
|
|
"loading",
|
|
"decoding",
|
|
],
|
|
});
|
|
|
|
const classAttribute = ["astro-imagetools-img", imgClassName, customClasses]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
const styleAttribute = [
|
|
"display: inline-block; overflow: hidden; vertical-align: middle;",
|
|
customInlineStyles + (customInlineStyles.endsWith(";") ? "" : ";"),
|
|
layoutStyles,
|
|
]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
const onloadAttribute = [
|
|
!imgClassName && style
|
|
? fadeInTransition
|
|
? `parentElement.style.setProperty('--z-index', 1); parentElement.style.setProperty('--opacity', 0);`
|
|
: `parentElement.style.backgroundImage = 'unset';`
|
|
: "",
|
|
customOnload,
|
|
]
|
|
.join(" ")
|
|
.trim();
|
|
|
|
const imgElement = `<img
|
|
${attributesString}
|
|
src="${src}"
|
|
${typeof alt === "string" ? `alt="${alt}"` : ""}
|
|
srcset="${srcset}"
|
|
sizes="${imagesizes}"
|
|
width="${sizes.width}"
|
|
height="${sizes.height}"
|
|
${loading ? `loading="${loading}"` : ""}
|
|
${decoding ? `decoding="${decoding}"` : ""}
|
|
class="${classAttribute}"
|
|
style="${styleAttribute}"
|
|
onload="${onloadAttribute}"
|
|
/>`;
|
|
|
|
return imgElement;
|
|
}
|