img-packa
v1.0.0
Published
a react img placeholder
Downloads
2
Maintainers
Readme
img placeholer
import React from 'react'
import './style.css'
export const Imgcompo = (props) => {
return (
<img
src='#'
className='placeholder-image'
width={props.width || '100' }
height={props.height || '100' }
alt ={props.alt || ''}
/>
)
}
style
.placeholder-image{ box-sizing: border-box; display: inline-block; position: relative;
} .placeholder-image::before{ content: ''; position: absolute; background: rgb(202, 127, 29); top: 0; left: 0; right: 0; bottom: 0; } .placeholder-image::after{ content: attr(width) ' * ' attr(height); white-space: pre; color: rgb(0, 0, 0); text-align: center; display: block; position: absolute; width: 100%; top: calc(50% - 0.5em); font-size: 100%; } .placeholder-image.alt:{ content: attr(alt); }