Reactjs 图像未显示

Question

我有一个本地图像，我想把它放在react中内置的网页上。我看了一下，但它对我没有帮助。我的代码如下：

const right={
float:"right",
fontSize:"18px"
}
export default class CloseUpCam extends Component {
render() {
return (
<div className="closeupcam" style={right}>
<div>CLOSEUP CAMERA</div>
<img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>
</div>
)}}

没有错误消息。这张照片就是没有出现。有人知道怎么了吗？谢谢

Answer 1

在react中，您必须像导入所有其他文件一样导入图像文件

import Image from "./img/hand.png";
const right = {
float: "right",
fontSize: "18px"
};
export default class CloseUpCam extends Component {
render() {
return (
<div className="closeupcam" style={right}>
<div>CLOSEUP CAMERA</div>
<img src={Image} width="70" height="50" alt="cam"/>
</div>
);
}
}

Answer 2

你展示图像的方式实际上在React中起到了作用，我认为这是你的图片路径的问题。您是否将所有静态文件都放在公用文件夹下，或者如何管理静态页面？

<img src={require('./img/hand.png')} width="70" height="50" alt="cam"/>

Answer 3

将图像放入react应用程序的公用文件夹并尝试

<img className="" alt="Tag" src="/assets/images/tag.svg"/>

Answer 4

将图像放入react应用程序的公用文件夹并尝试

const right={
float:"right",
fontSize:"18px"
}
export default class CloseUpCam extends Component {
render() {
return (
<div className="closeupcam" style={right}>
<div>CLOSEUP CAMERA</div>
<img src="/imagename.jpg" width="70" height="50" alt="cam"/>
</div>
)}}

这是的工作样本

Answer 5

将图像放入公共文件夹。