React.js 从公共文件夹加载图像不起作用答案

【问题标题】：React.js load Image not working from Public FolderReact.js 从公共文件夹加载图像不起作用
【发布时间】：2020-11-01 20:05:56
【问题描述】：

我目前正在学习 React.js，我想从公共文件夹加载图像。但由于某些原因，这不起作用。我的配置如下所示： enter image description here

我要显示图像的组件如下所示：

import React, {useState, useEffect} from "react";
import Tile from "../../../Tiles/Tile/Tile";
import './../../../Tiles/Tiles.sass';

function Market() {

    return (
        <>
            <h1>Market</h1>
            <div className="Tiles__Container">
                <Tile src="Images/img-1.jpg"/>
            </div>

        </>
    );
}

export default Market;

我正在调用的组件：

import React from "react";
import {Link} from "react-router-dom";

function Tile(props) {
    return (
        <div className="Tiles__Item">
            <Link className="Tiles__Item__Link" to={props.path}>
                <figure className="Tiles__Item__Pic-Wrap" data-category={props.label}>
                    <img className="Tiles__Item__Img" src="Images/img-1.jpg" alt={props.label}/>
                </figure>
                <div className="Tiles__Item__Info">
                    <h5 className="Tiles__Item__Text">{props.text}</h5>
                    <h6 className="Tiles__Item__Text">{props.perAmount}</h6>
                </div>
            </Link>
        </div>
    );
}

export default Tile;

当我查看更改时，它看起来像这样： enter image description here

如果我查看开发者控制台，图像会从这里加载： enter image description here

这是错误的，位置应如下所示： http://localhost:3001/Images/img-1.jpg

你的西马多

【问题讨论】：

尝试<Tile src="/Images/img-1.jpg"/> 使路径相对于根 url
我尝试了您的想法，但它仍在从同一位置加载：localhost:3000/shops/Images/img-1.jpg
哦，你如何更新img src，同样的逻辑。不知道为什么要在 Tile 中发送 src 道具。
我遵循了一个教程，他的做法完全相同。在我按照教程构建的另一个应用程序中，我使用相同的组件并且它工作正常。

标签： reactjs react-native

【解决方案1】：

导入图像并以这种方式使用它

import React, {useState, useEffect} from "react";
import Tile from "../../../Tiles/Tile/Tile";
import './../../../Tiles/Tiles.sass';
import img1 from '../../../../../public/Images/img-1.jpg'; // Here we are importing the image directly

function Market() {

    return (
        <>
            <h1>Market</h1>
            <div className="Tiles__Container">
                <Tile src={img1}/>
            </div>

        </>
    );
}

export default Market;

在我们传入 img1 作为 src 属性的组件中，让我们使用它

import React from "react";
import {Link} from "react-router-dom";

function Tile(props) {
    return (
        <div className="Tiles__Item">
            <Link className="Tiles__Item__Link" to={props.path}>
                <figure className="Tiles__Item__Pic-Wrap" data-category={props.label}>
                    <img className="Tiles__Item__Img" src={props.src} alt={props.label}/>
                </figure>
                <div className="Tiles__Item__Info">
                    <h5 className="Tiles__Item__Text">{props.text}</h5>
                    <h6 className="Tiles__Item__Text">{props.perAmount}</h6>
                </div>
            </Link>
        </div>
    );
}

export default Tile;

【讨论】：