From 01b90fc4a47d351686f5bc5742299ce7a152969a Mon Sep 17 00:00:00 2001 From: Puneeth Kharvi <puneeth.kharvi@niveussolutions.com> Date: Tue, 11 Jan 2022 16:27:45 +0530 Subject: [PATCH] changed --- src/App.js | 14 ++++++++++--- src/components/images/index.jsx | 27 ++++++++++++++++--------- src/components/images/style.module.scss | 18 +++++++---------- 3 files changed, 36 insertions(+), 23 deletions(-) diff --git a/src/App.js b/src/App.js index dae6bf5..927c5da 100644 --- a/src/App.js +++ b/src/App.js @@ -1,9 +1,17 @@ -import Hello from "./components/images"; +import Image from "./components/images"; +import "./components/images/style.module.scss" function App() { return (<> - <Hello/> - <Hello/> + + <Image + src={"./gani.jpg"} + alt="Image not found" + className={""} + width={"200px"} + height={"200px"} + /> + </> ) } diff --git a/src/components/images/index.jsx b/src/components/images/index.jsx index c0cba66..a95e3ef 100644 --- a/src/components/images/index.jsx +++ b/src/components/images/index.jsx @@ -1,12 +1,21 @@ import React from "react"; -import "./style.css"; - -const Hello= () => { - return( - <div className="primary"> - <img src="./gani.jpg" alt="image not found"/> - </div> - ) + + + +function Image(props) { + const { imageClass, src, alt, width,height,id} = props; + + return ( + <img + id={id} + className={imageClass } + src={src} + alt={alt} + height={height} + width={width} + /> + ); } -export default Hello; \ No newline at end of file + +export default Image; \ No newline at end of file diff --git a/src/components/images/style.module.scss b/src/components/images/style.module.scss index 007f66f..787c374 100644 --- a/src/components/images/style.module.scss +++ b/src/components/images/style.module.scss @@ -1,12 +1,8 @@ -.primary { - width: 110px; - height: 110px; - border: 2px solid rgb(172, 70, 78); - display: flex; - align-items: center; - justify-content: center; -} -.primary img { - width: 100px; - height: 100px; +.imageStyleClass { + + border-radius: 50%; + + + + } -- GitLab