image

示例

以上图片的显示来自拓展后的markdown。但是故意写错了src导致加载失败的效果。

## <img>

以容器方式

低版本浏览器需要指定 width

示例
.na-image(style="width:300px")
    img(alt="示例" src='@/assets/images/example.jpg')

## background-image

以背景方式

必须以某种方式指定宽高

比如指定 height 和 aspect-ratio

也可用 display: flex 这相当于 width: 100%

🤡

.na-image(style={
    display: 'flex',
    height: '300px',
    'background-image': url('@/assets/images/example.png')
})
    p.na-paragraph(data-size=1) 🤡

## mask

背景图或容器都可以使用的遮罩 .na-image>.na-image-mask 

.na-image(style={
    width: '100px',
    height: '100px',
    'background-image': url('@/assets/images/example.jpg'),
    'border-radius': '50%'
})
    .na-image-mask(onclick=function(){
        event.target == this || this.parentElement.toggleAttribute('data-iine')
    })
        svg(data-icon='interactive-button/outline/heart')
        svg(data-icon='interactive-button/fill/heart-fill')

style(lang='stylus').
    .na-image
        svg[data-icon='interactive-button/outline/heart']
        svg[data-icon='interactive-button/fill/heart-fill']
            font-size 24px
            color rgb(var(--magenta-6))
            cursor pointer
        
        &[data-iine] svg[data-icon='interactive-button/outline/heart']
        &:not([data-iine]) svg[data-icon='interactive-button/fill/heart-fill']
            display none

适用于大尺寸图片（ 128像素以上 ）的底部遮罩 .na-image>.na-image-footer

示例
标题标题标题标题标题标题标题标题标题标题标题
描述描述描述描述描述描述描述描述描述描述描述描述 
.na-image(style={
    width: "300px",
    height: "300px",
    "border-radius": "var(--border-radius-lg)"
})
    img(alt="示例" src='@/assets/images/example.jpg')
    .na-image-footer
        .na-image-footer-content
            .na-title(data-size=5)
                | 标题标题标题标题标题标题标题标题标题标题标题
            .na-paragraph(data-ellipsis=1)
                | 描述描述描述描述描述描述描述描述描述描述描述描述
        .na-image-footer-action
            svg.na-link(
                role="button"
                aria-label="Open the image in a new tab"
                width=24
                height=24
                onclick=function(){
                    window.open("@/assets/images/example.jpg")
                }
            )
            svg.na-link(
                role="button"
                aria-label="Download the image"
                width=24
                height=24
            )

以下全局变量可以修改部分样式

局部还定义了 na-link 的颜色样式 需要一并修改

## upload

配合 .na-input-wrapper>input[type=file].na-input 使用即可

这里实现使用了 :has() 选择器，如果你的浏览器不支持会被降级，样式会有些许区别 

span.na-image.na-input-wrapper(style={
    width: '100px',
    height: '100px',
})
    input.na-input(type='file' disabled)
    svg(width=24)

span.na-image.na-input-wrapper(style={
    width: '100px',
    height: '100px',
} data-primary)
    input.na-input#uploader(
        type='file'
        title='点击上传图片'
        onchange=function(e){
            const reader = new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onload = () => {
                this.parentElement.style.backgroundImage = `url(${reader.result})`;
            };
        }
    )
    svg(width=24)

.na-input-wrapper 也可以使用局部变量 --color-input-wrapper 修改颜色RGB值