reactjs图像不显示答案

【问题标题】：reactjs image doesn't show upreactjs图像不显示
【发布时间】：2019-01-05 05:34:00
【问题描述】：

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

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>
    )}}

没有错误消息。图片只是不显示。有谁知道出了什么问题？谢谢。

【问题讨论】：

我认为是因为需要。
@JaisonJustus 怎么样？
像这样 - <img src="/img/hand.png" width="70" height="50" alt="cam"/> ?
@JaisonJustus 这绝对行不通。我相信因为 webpack 我需要这个要求。我以前使用过 Vuejs，我需要将图像添加到我的网页。我只是不知道我做错了什么反应
如果你导入图片（例如 import imgVar from './img/hand.jpg'）然后写有帮助吗？如果不是，请将图像名称更改为不存在的图像。你有错误吗？如果你这样做了，我猜这意味着第一次导入工作并且问题出在

标签： reactjs

【解决方案1】：

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

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>
        );
    }
}

【讨论】：

【解决方案2】：

把图片放到react app的public文件夹里试试

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

【讨论】：

【解决方案3】：

你的显示图像的方式实际上在 React 中有效，我认为这是你图片路径的问题。你是把所有的静态文件放在 public 文件夹下，还是你如何管理你的静态页面？

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

【讨论】：

这张图片和我的js文件在src子目录下。
您是否使用 create-react-app 来创建您的应用程序？ wepack 对图片的大小有限制。如果图片超过配置文件中的大小，则不会打包。也许你可以检查一下。
哦。大小有什么限制？
我发现大小限制是2MB，但我的图片只有39KB。
试试这个。 stackoverflow.com/questions/34582405/…。你也是同样的问题。

【解决方案4】：

把图片放到react app的public文件夹里试试

    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>
        )}}

这是一个有效的sample

【讨论】：

我试过了，结果是一样的。它对我不起作用。仍然没有错误消息。
是的。如果路径不正确，则会出现错误消息。我试过了。
你能不能把图片放到公用文件夹里再试一下，我会编辑代码
我收到一个错误：编译失败。未找到模块：您尝试导入位于项目 src/ 目录之外的 ../../../public/hand.png。不支持 src/ 之外的相对导入。您可以将它移到 src/ 中，或者从项目的 node_modules/ 中添加符号链接。
@Young 我已经在代码和框中添加了一个工作示例，请检查

【解决方案5】：

将您的图片放入您的 public 文件夹。

【讨论】：