Question

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

 }

我有一个链接到它的css文件，但仍然无法正常工作

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

如何在React中调整img的大小？谢谢！

Answer 1

我不确定css的导入是否错误，是否有其他原因导致此问题。工作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;
}

希望有帮助！

Answer 2

您可能需要使用正确的jsx语法。

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

否则CSS看起来不错。

如何在React中调整img的大小

2 个答案: