Solution

To add image in styled components, sets the styled img element with the src attribute set to the file logo192.png and the alt attribute set to a descriptive string.

Snippet

In this snippet, we will see how to add image in styled components and the styled img element with the src attribute set to the file logo192.png.

const StyledImg = styled.img`
  height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit: cover;
`;

<StyledImg src="logo192.png" alt="image" />

Example

In this example, we will create styled componets as the styledImg element with the src attribute set to the file logo192.png.

Let’s start coding…

App.js

import styled from "styled-components";
 
const StyledImg = styled.img`
  height: 200px;
  width: 200px;
  border-radius: 50%;
  object-fit: cover;
`;

 const App = () => {
  return <StyledImg src="logo192.png" alt="image" />;
};

export default App;

Output

add, image

codesandbox