just add the 'require' before the image url, because its local images

src/Components/FormationMaterialDescription.js

@@ -99,9 +99,9 @@ export default function FormationMaterialDescription(props) {
 							<br/>
 							<StyledAnchor href={colecao_obj.developedurl}>
 								{
-									colecao_obj.id === 3 ?	<LongUserIcon src="img/logo_parceiros/ic_peninsula.png" />
+									colecao_obj.id === 3 ?	<LongUserIcon src={require("../img/logo_parceiros/ic_peninsula.png")} />
 									: <div>
-											<UserIcon src="img/logo_parceiros/ic_nute.png"/>
+											<UserIcon src={require("../img/logo_parceiros/ic_nute.png")}/>
 											<Red>
 												{colecao_obj.developed}
 											</Red>

src/Components/FormationMaterialHeader.js

@@ -30,7 +30,7 @@ export default function FormationMaterialHeader(props) {
 					alignItems="stretch"
 				>
 					<Grid item xs={5}>
-						<Img src={colecao_obj.img}/>
+						<Img src={require(`../../public/${colecao_obj.img}`)}/>
 					</Grid>
 					<Grid item container xs={7}
 						direction="column"

src/Components/TopicCard.js

@@ -8,7 +8,7 @@ export default function TopicCard(props) {
   return (	
 		<CardModel>
 			<StyledLink to={"topico?colecao="+props.colecao_id+"&topico="+props.topico_obj.id}>
-				<CardImage src={props.topico_obj.img}/>
+				<CardImage src={require(`../../public/${props.topico_obj.img}`)}/>
 				<Title>
 					<BoldTitle>
 						{ props.topico_obj.pre_title }
@@ -39,10 +39,9 @@ const Title=styled.h1`
 `
 const CardModel=styled(Card)`
 	position: relative;
-	width: 18%;
 	margin-bottom: 30px;
 	padding: 0;
-	height: 225px;
+	height: 270px;
 `
 const CardImage=styled.img`
 	width: 100%;

src/Components/TopicFooter.js

@@ -13,7 +13,7 @@ export default function TopicFooter(props) {
 					alignItems="center"
 				>
 					<Grid item>
-						<FormationMaterialImage src={props.src}/>
+						<FormationMaterialImage src={require(`../../public/${props.src}`)}/>
 					</Grid>
 					<Grid item>
 						<Text>