socialtables / react-image-fallback Goto Github PK

View Code? Open in Web Editor NEW

112.0 38.0 18.0 474 KB

stop displaying broken images, have another image to fallback on.

JavaScript 100.00%

renovation library product-design-system react-component mend

react-image-fallback's Introduction

React Image Fallback

React Image Fallback exists for those times that you're just not sure an image will be there. See a simple demo here

Install

npm install react-image-fallback

Required Props

`src`

A string represent the url to your primary image.

`fallbackImage`

A string representing the image you want to fallback to if your primary image is not there. Optionally this can also be passed in as a react element. This can also be passed in as an array of string srcs or react elements, the component will attempt to keep trying srcs until a loadable src is found. It should be noted that a react element will always be treated as a loadable src.

Optional Props

`initialImage`

The image to show before your src or fallbackImage load. Can optionally be passed in as a react element.

`initialTimeout`

timeout in millisecond before to show initialImage. Default is null which should initialImage immediately

`onLoad`

A callback called if initial image loads successfully, will be called with successful image url.

`onError`

A callback called if initial image load fails, will be called with failing image url.

`spread props`

This component also utilizes jsx spread attributes to pass along custom image attributes such as alt tags and className. Only valid dom props will be spread to the image tag.

Use

import React From "react";
import ReactImageFallback from "react-image-fallback";
export default class ShowImage extends React.Component {
	render() {
		return (
			<div>
				<ReactImageFallback
					src="my-image.png"
					fallbackImage="my-backup.png"
					initialImage="loader.gif"
					alt="cool image should be here"
					className="my-image" />
			</div>
		);
	}
}

Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

react-image-fallback's People

Contributors

Stargazers

Watchers

Forkers

ahstro styleket blueskydigital ridergoster pashist stevemao six5536 jhubble 8ensmith brannmar beyasu j5int mattots favac tt124640432 dkadrios sofitakei martinfoakes

react-image-fallback's Issues

Exception during initial render is hidden by exception in react-image-fallback 'componentWillUnmount'

Version 6.0.0

If the initial react tree fails to render due to an exception (i.e. uncaught exception thrown from render() of one of the React components), it can be that componentWillUnmount is called without having called componentDidMount.

This causes this.displayImage in componentWillUnmount to be undefined and therefore cause an error that masks the original error (stops the React error html from rendering).

A fix would be to surround the clean up with a null check:

if (this.displayImage) {
	this.displayImage.onerror = null;
	this.displayImage.onload = null;
	this.displayImage = null;
}

Use spread operator to allow for any attributes

We should spread the props into the img tag so people could pass ids, custom data attributes, or other image attributes that it would be a pain to maintain.

CVE-2020-7733 (High) detected in ua-parser-js-0.7.18.tgz - autoclosed

CVE-2020-7733 - High Severity Vulnerability

Vulnerable Library - ua-parser-js-0.7.18.tgz

Lightweight JavaScript-based user-agent string parser

Library home page: https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/ua-parser-js/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - ❌ ua-parser-js-0.7.18.tgz (Vulnerable Library)

Found in HEAD commit: c7153a7f2cc175073dc8b6baf6898558c21c66a0

Found in base branch: master

Vulnerability Details

The package ua-parser-js before 0.7.22 are vulnerable to Regular Expression Denial of Service (ReDoS) via the regex for Redmi Phones and Mi Pad Tablets UA.

Publish Date: 2020-09-16

URL: CVE-2020-7733

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2020-7733

Release Date: 2020-09-16

Fix Resolution (ua-parser-js): 0.7.22

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

CVE-2022-2596 (Medium) detected in node-fetch-1.7.3.tgz - autoclosed

CVE-2022-2596 - Medium Severity Vulnerability

Vulnerable Library - node-fetch-1.7.3.tgz

A light-weight module that brings window.fetch to node.js and io.js

Library home page: https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/node-fetch/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - isomorphic-fetch-2.2.1.tgz
    - ❌ node-fetch-1.7.3.tgz (Vulnerable Library)

Found in base branch: master

Vulnerability Details

Denial of Service in GitHub repository node-fetch/node-fetch prior to 3.2.10.

Publish Date: 2022-08-01

URL: CVE-2022-2596

CVSS 3 Score Details (5.9)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: High
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://cve.mitre.org/cgi-bin/cvename.cgi?name=CVE-2022-2596

Release Date: 2022-08-01

Fix Resolution (node-fetch): 4.0.0-beta.1

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

update to babel 6

React lifecycle method warnings

React deprecates componentWillReceiveProps in favor of getDerivedStateFromProps. Documentation. If we don’t fix this, the component will be broken in React 17.

react-image-fallback/src/index.js

Lines 39 to 47 in 6adce1a

    
           componentWillReceiveProps(nextProps) { 
        
           	if (nextProps.src !== this.props.src) { 
        
           		this.isLoaded = false; 
        
           		if (nextProps.initialImage) { 
        
           			this.handleInitialTimeout(); 
        
           		} 
        
           		this.setDisplayImage({ image: nextProps.src, fallbacks: nextProps.fallbackImage }); 
        
           	} 
        
           }

CVE-2020-15168 (Medium) detected in node-fetch-1.7.3.tgz - autoclosed

CVE-2020-15168 - Medium Severity Vulnerability

Vulnerable Library - node-fetch-1.7.3.tgz

A light-weight module that brings window.fetch to node.js and io.js

Library home page: https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/node-fetch/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - isomorphic-fetch-2.2.1.tgz
    - ❌ node-fetch-1.7.3.tgz (Vulnerable Library)

Found in HEAD commit: c7153a7f2cc175073dc8b6baf6898558c21c66a0

Found in base branch: master

Vulnerability Details

node-fetch before versions 2.6.1 and 3.0.0-beta.9 did not honor the size option after following a redirect, which means that when a content size was over the limit, a FetchError would never get thrown and the process would end without failure. For most people, this fix will have a little or no impact. However, if you are relying on node-fetch to gate files above a size, the impact could be significant, for example: If you don't double-check the size of the data after fetch() has completed, your JS thread could get tied up doing work on a large file (DoS) and/or cost you money in computing.

Publish Date: 2020-09-10

URL: CVE-2020-15168

CVSS 3 Score Details (5.3)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: Low

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: GHSA-w7rc-rwvf-8q5r

Release Date: 2020-09-17

Fix Resolution (node-fetch): 2.6.1

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

feature request - lazy load image

first of all, thank you for this handy component.
and I know there is an initialImage property.
but what I want is lazy loading src image with blurred image.
this is like to put a blurred thumbnail in initialImage but without getting any extra image src from APIs.
maybe the mix of Intersection Observer API and StackBlur wanted.

Detect class of initialImage

Can I detect class of initialImage ?

feature request - loading timeout

First of all thanks for very useful component!
I use it in my project and sometimes notice that the browser waits for a long time to load the primary image. Of course it loads a fallback image after all but I think it would be nice to have an additional attribute, e.g. loadingTimeout, which would allow us to limit the loading time of the primary image. If the timeout exceed it would just show the fallback image.
Does it make any sense?

fallbackImage as array?

Would it be possible to convert fallbackImage to an array, so that we can have multiple fallbacks? In case the first is missing, try the second, etc...

support native

import ReactImageFallback from "react-image-fallback/native";

phones use images too.

add tests

should be able to update the image being displayed

right now image is set in ComponentDidMount so can't be changed after mounting the component

CVE-2022-0235 (Medium) detected in node-fetch-1.7.3.tgz - autoclosed

CVE-2022-0235 - Medium Severity Vulnerability

Vulnerable Library - node-fetch-1.7.3.tgz

A light-weight module that brings window.fetch to node.js and io.js

Library home page: https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/node-fetch/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - isomorphic-fetch-2.2.1.tgz
    - ❌ node-fetch-1.7.3.tgz (Vulnerable Library)

Found in HEAD commit: c7153a7f2cc175073dc8b6baf6898558c21c66a0

Found in base branch: master

Vulnerability Details

node-fetch is vulnerable to Exposure of Sensitive Information to an Unauthorized Actor

Publish Date: 2022-01-16

URL: CVE-2022-0235

CVSS 3 Score Details (6.1)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: Required
- Scope: Changed
Impact Metrics:
- Confidentiality Impact: Low
- Integrity Impact: Low
- Availability Impact: None

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: GHSA-r683-j2x4-v87g

Release Date: 2022-01-16

Fix Resolution (node-fetch): 2.6.7

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

allow prop for custom onload and onerror handlers for image

Remove or add class to <span>

If people have styled span tags where using react-image-fallback, there's currently no simple way to unstyle the span surrounding the img.
I would suggest removing it or, if there's a good reason for it being there, add a class to it, so that it can easily be unstyled with CSS.
I would've made a PR, but I wanted to discuss which alternative is better first.

Allow initial display to be a component

Use Case: Css animation to display before an image loads, instead of an image that will also have to load.

CVE-2021-27292 (High) detected in ua-parser-js-0.7.18.tgz - autoclosed

CVE-2021-27292 - High Severity Vulnerability

Vulnerable Library - ua-parser-js-0.7.18.tgz

Lightweight JavaScript-based user-agent string parser

Library home page: https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/ua-parser-js/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - ❌ ua-parser-js-0.7.18.tgz (Vulnerable Library)

Found in HEAD commit: c7153a7f2cc175073dc8b6baf6898558c21c66a0

Found in base branch: master

Vulnerability Details

ua-parser-js >= 0.7.14, fixed in 0.7.24, uses a regular expression which is vulnerable to denial of service. If an attacker sends a malicious User-Agent header, ua-parser-js will get stuck processing it for an extended period of time.

Publish Date: 2021-03-17

URL: CVE-2021-27292

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: https://github.com/faisalman/ua-parser-js/releases/tag/0.7.24

Release Date: 2021-03-17

Fix Resolution (ua-parser-js): 0.7.24

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

CVE-2020-7793 (High) detected in ua-parser-js-0.7.18.tgz - autoclosed

CVE-2020-7793 - High Severity Vulnerability

Vulnerable Library - ua-parser-js-0.7.18.tgz

Lightweight JavaScript-based user-agent string parser

Library home page: https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.18.tgz

Path to dependency file: /package.json

Path to vulnerable library: /node_modules/ua-parser-js/package.json

Dependency Hierarchy:

prop-types-15.6.1.tgz (Root Library)
- fbjs-0.8.16.tgz
  - ❌ ua-parser-js-0.7.18.tgz (Vulnerable Library)

Found in HEAD commit: c7153a7f2cc175073dc8b6baf6898558c21c66a0

Found in base branch: master

Vulnerability Details

The package ua-parser-js before 0.7.23 are vulnerable to Regular Expression Denial of Service (ReDoS) in multiple regexes (see linked commit for more info).

Publish Date: 2020-12-11

URL: CVE-2020-7793

CVSS 3 Score Details (7.5)

Base Score Metrics:

Exploitability Metrics:
- Attack Vector: Network
- Attack Complexity: Low
- Privileges Required: None
- User Interaction: None
- Scope: Unchanged
Impact Metrics:
- Confidentiality Impact: None
- Integrity Impact: None
- Availability Impact: High

For more information on CVSS3 Scores, click here.

Suggested Fix

Type: Upgrade version

Origin: faisalman/ua-parser-js@6d1f26d

Release Date: 2020-12-11

Fix Resolution (ua-parser-js): 0.7.23

Direct dependency fix Resolution (prop-types): 15.6.2

⛑️ Automatic Remediation is available for this issue

	componentWillReceiveProps(nextProps) {
	if (nextProps.src !== this.props.src) {
	this.isLoaded = false;
	if (nextProps.initialImage) {
	this.handleInitialTimeout();
	}
	this.setDisplayImage({ image: nextProps.src, fallbacks: nextProps.fallbackImage });
	}
	}

socialtables / react-image-fallback Goto Github PK

react-image-fallback's Introduction

React Image Fallback

Install

Required Props

src

fallbackImage

Optional Props

initialImage

initialTimeout

onLoad

onError

spread props

Use

react-image-fallback's People

Contributors

Stargazers

Watchers

Forkers

react-image-fallback's Issues

CVE-2020-7733 - High Severity Vulnerability

CVE-2022-2596 - Medium Severity Vulnerability

CVE-2020-15168 - Medium Severity Vulnerability

CVE-2022-0235 - Medium Severity Vulnerability

CVE-2021-27292 - High Severity Vulnerability

CVE-2020-7793 - High Severity Vulnerability

Recommend Projects

Recommend Topics

Recommend Org

`src`

`fallbackImage`

`initialImage`

`initialTimeout`

`onLoad`

`onError`

`spread props`