👌 IMPROVE: Gestion erreur images fonctions

This commit is contained in:
Divlo 2020-05-01 02:27:30 +02:00
parent 0e591ae62f
commit b628aaecce
10 changed files with 19 additions and 9 deletions

View File

@ -3,7 +3,7 @@ import { useState, forwardRef } from 'react';
import date from 'date-and-time'; import date from 'date-and-time';
import Loader from '../Loader'; import Loader from '../Loader';
import './FunctionCard.css'; import './FunctionCard.css';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config/config';
const FunctionCard = forwardRef((props, ref) => { const FunctionCard = forwardRef((props, ref) => {
@ -13,6 +13,10 @@ const FunctionCard = forwardRef((props, ref) => {
setIsLoading(false); setIsLoading(false);
} }
const handleError = (event) => {
event.target.src = API_URL + "/images/functions/default.png";
}
const isFormOrArticle = (props.type === 'form' || props.type === 'article'); const isFormOrArticle = (props.type === 'form' || props.type === 'article');
return ( return (
@ -37,7 +41,7 @@ const FunctionCard = forwardRef((props, ref) => {
<div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}> <div className={`FunctionCard__container ${isLoading ? "d-none" : ""}`}>
<div className="FunctionCard__top"> <div className="FunctionCard__top">
<img onLoad={handleLoad} className="FunctionCard__image" alt={props.title} src={API_URL + props.image} /> <img onLoad={handleLoad} onError={handleError} className="FunctionCard__image" alt={props.title} src={API_URL + props.image} />
<h2 className="FunctionCard__title">{props.title}</h2> <h2 className="FunctionCard__title">{props.title}</h2>
<p className="FunctionCard__description text-center">{props.description}</p> <p className="FunctionCard__description text-center">{props.description}</p>
</div> </div>

View File

@ -6,7 +6,7 @@ import { faStar as farStar } from '@fortawesome/free-regular-svg-icons';
import date from 'date-and-time'; import date from 'date-and-time';
import { UserContext } from '../../contexts/UserContext'; import { UserContext } from '../../contexts/UserContext';
import api from '../../utils/api'; import api from '../../utils/api';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config/config';
import '../FunctionCard/FunctionCard.css'; import '../FunctionCard/FunctionCard.css';
const FunctionComponentTop = (props) => { const FunctionComponentTop = (props) => {
@ -40,6 +40,10 @@ const FunctionComponentTop = (props) => {
} }
} }
const handleError = (event) => {
event.target.src = API_URL + "/images/functions/default.png";
}
return ( return (
<div className="container-fluid"> <div className="container-fluid">
<div className="row justify-content-center text-center"> <div className="row justify-content-center text-center">
@ -49,7 +53,7 @@ const FunctionComponentTop = (props) => {
<FontAwesomeIcon onClick={toggleFavorite} { ...(isFavorite) ? { icon: faStar } : { icon: farStar } } title={(isFavorite) ? "Retirer la fonction des favoris" : "Ajouter la fonction aux favoris"} className="FunctionComponent__star-favorite" /> <FontAwesomeIcon onClick={toggleFavorite} { ...(isFavorite) ? { icon: faStar } : { icon: farStar } } title={(isFavorite) ? "Retirer la fonction des favoris" : "Ajouter la fonction aux favoris"} className="FunctionComponent__star-favorite" />
} }
<img className="FunctionComponent__image" src={API_URL + props.image} alt={props.title} /> <img onError={handleError} className="FunctionComponent__image" src={API_URL + props.image} alt={props.title} />
<h1 className="FunctionComponent__title title-important">{props.title}</h1> <h1 className="FunctionComponent__title title-important">{props.title}</h1>
<p className="FunctionComponent__description">{props.description}</p> <p className="FunctionComponent__description">{props.description}</p>
<div className="FunctionCard__info"> <div className="FunctionCard__info">

View File

@ -1,5 +1,5 @@
import { Fragment, useState } from 'react'; import { Fragment, useState } from 'react';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config/config';
import HeadTag from '../HeadTag'; import HeadTag from '../HeadTag';
import FunctionTabsTop from './FunctionTabsTop'; import FunctionTabsTop from './FunctionTabsTop';
import FunctionComponentTop from './FunctionComponentTop'; import FunctionComponentTop from './FunctionComponentTop';

View File

@ -7,7 +7,7 @@ import EditArticleFunction from '../../components/FunctionAdmin/EditArticleFunct
import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction'; import EditFormFunction from '../../components/FunctionAdmin/EditFormFunction';
import redirect from '../../utils/redirect'; import redirect from '../../utils/redirect';
import api from '../../utils/api'; import api from '../../utils/api';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config/config';
import '../../components/FunctionPage/FunctionTabs.css'; import '../../components/FunctionPage/FunctionTabs.css';
import '../../public/css/pages/admin.css'; import '../../public/css/pages/admin.css';

View File

@ -11,7 +11,7 @@ import redirect from '../../utils/redirect';
import htmlParser from 'html-react-parser'; import htmlParser from 'html-react-parser';
import Loader from '../../components/Loader'; import Loader from '../../components/Loader';
import api from '../../utils/api'; import api from '../../utils/api';
import { API_URL } from '../../utils/config'; import { API_URL } from '../../utils/config/config';
import '../../public/css/pages/profile.css'; import '../../public/css/pages/profile.css';
const Profile = (props) => { const Profile = (props) => {

View File

@ -1,5 +1,5 @@
import axios from 'axios'; import axios from 'axios';
import { API_URL } from './config'; import { API_URL } from './config/config';
const api = axios.create({ const api = axios.create({
baseURL: API_URL, baseURL: API_URL,

View File

@ -0,0 +1 @@
export const API_URL = "http://localhost:8080";

View File

@ -0,0 +1 @@
export const API_URL = "https://api.function.divlo.fr";