Security News
NIST Misses 2024 Deadline to Clear NVD Backlog
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
@rei/cdr-img
Advanced tools
For the most up-to-date information, see REI Cedar documentation.
name | type | default |
---|---|---|
alt | string | empty |
Sets the alternate text attribute for the image. Default value is empty
name | type | default |
---|---|---|
src | string | empty |
Sets image source URL
name | type | default |
---|---|---|
lazy | bool | false |
Setting this value to true will enable lazy loading for internal applications. Lazy loading is provided using the the FEDPACK rei-lazy-image-loader project
name | type | default |
---|---|---|
lazyOpts | object | array |
For internal projects. Provide an object of lazy options as defined on within the rei-lazy-image-loader API. This will output each option as a data-
attribute on the root element.
name | type | default |
---|---|---|
ratio | enum | n/a |
Sets the aspect ratio and scales the image as large as possible without cropping or stretching the image (See CSS background-size: contain). Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
name | type | default |
---|---|---|
ratioSm | enum | n/a |
Sets the aspect ratio at the small breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
name | type | default |
---|---|---|
ratioMd | enum | n/a |
Sets the aspect ratio at the medium breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
name | type | default |
---|---|---|
ratioLg | enum | n/a |
Sets the aspect ratio at the large breakpoint. Possible values: { 'auto' | 'square' | '1-2' | '2-3' | '3-4' | '9-16' | '2-1' | '3-2' | '4-3' | '16-9' }
name | type | default |
---|---|---|
crop | string | n/a |
Requires ‘ratio’ to define the starting position for cropping image. Image will overflow and not be displayed. Possible values: { ‘left’ | ‘x-center’ | ‘right’ | ‘top’ « ‘y-center’ | ‘bottom’ }
name | type | default |
---|---|---|
cover | false | n/a |
Requires ‘ratio’ to scale the image to be as large as possible to fill the entire background area. See CSS background-size: cover.
name | type | default |
---|---|---|
radius | enum | n/a |
Sets a border radius to the root element. Possible values: { 'circle' | ‘rounded’ }
name | type | default |
---|---|---|
modifier | string | n/a |
Modifies the style variant for this component. Possible value: { ‘responsive’ }
name |
---|
default |
Set the innerHTML for cdr-image. This includes text and html markup
Resources are available within the CdrImg package:
@rei/cdr-img
cdr-img.css
To incorporate the required assets for a component, use the following steps:
Install the CdrImg
package using npm
in your terminal:
Terminal
npm i -S @rei/cdr-img
main.js
// import your required CSS.
import '@rei/cdr-img/dist/cdr-img.css';
local.vue
<template>
<cdr-img />
</template>
<script>
import { CdrImg } from '@rei/cdr-img';
export default {
...
components: {
CdrImg
}
}
</script>
contain
which resizes the background image to make sure it is fully visiblecover
propertycrop
propertycover
and crop
properties can be used togetherratio
propertyratio
propertyleft
: Orients the image to its horizontal leftright
: Orients the image to its horizontal rightx-center
: Orients the image to its horizontal centertop
: Orients the image to its topbottom
: Orients the image to its bottomy-center
: Orients the image to its vertical centercircle
or rounded
(for rounded rectangle)cdr-core.css
Following variants are available to the cdr-img
modifier attribute:
Value | Description |
---|---|
'responsive' | Sets the image to display block and 100% width |
For internal applications with large images or images that would benefit from changes due to platform or breakpoint, use lazy load properties to integrate with the rei-lazy-image-loader project.
FAQs
REI Cedar Style Framework - Vue Component for Image
We found that @rei/cdr-img demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 9 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.
Security News
Cloudflare has launched a setup wizard allowing users to easily create and manage a security.txt file for vulnerability disclosure on their websites.
Security News
The Socket Research team breaks down a malicious npm package targeting the legitimate DOMPurify library. It uses obfuscated code to hide that it is exfiltrating browser and crypto wallet data.