how to resize img in React

Question

 render() {
   <img className="photo" src={"/public/love"} />

 }

I have a css file linked to it and it still isn't working

 .photo {
      height: 100px;
      width: 100px; 
 }

How can you resize an img in react?Thanks!

Answer 1

I am not sure if the import of css is wrong there something else that is causing the issue. Working codesandbox link

import React from "react";
import ReactDOM from "react-dom";
import panda from "./images/panda.png";

import "./styles.css";

function App() {
  return (
    <div>
      <img alt="panda" className="photo" src={panda} />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

styles.css

.photo {
  height: 200px;
  width: 200px;
}

Hope that helps!!!

Answer 2

This is another way to give the size to the image in the latest Reactjs direct in the code. you can also use the classes to target the image.

<img src='imagepath.jpg' width={250} height={250} alt='Large Pizza' />

Answer 3

You probably need to use the proper jsx syntax.

render() {
    return <img className="photo" src={ require('/public/love') } />;
}

Otherwise the css looks fine.