Question

几天前，我开始创建一个 Web 应用程序来练习使用 Reacjs。该网络应用非常简单，它是一个 SPA，根据每个英雄所属的发布商，超级英雄将显示在图像中（存储在本地，不使用数据库，使用虚假 API）。

一切都很顺利，直到我尝试加载与您的屏幕对应的图像。但是图像没有加载，好像路径错误或图像不存在一样。我已经尝试了一切，但没有任何效果。我需要帮助来解决这个问题。

这是单独显示每个图像的组件。

import React from 'react'

export const HeroeCard = ({ 
    id, 
    superhero, 
    publisher, 
    alter_ego, 
    first_appearance, 
    characters 

}) => {

    console.log(id);

    return (
        <div className="card ms-3" style={ { maxWidth: 540 } } >
            <div className="row no-gutters">
                <div className="col-md-4">
                    <img src={ `./assets/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />
                </div>
            </div>
        </div>
    )
}

这个组件是每个英雄被其发布者过滤并作为过滤数据作为道具发送到“HeroesCard”组件的地方。

import React from 'react'
import { getHeroesByPublisher } from '../../selectors/getHeroesByPublisher'
import {HeroeCard} from './HeroeCard';

const HeroesList = ({ publisher }) => {
    
    const heores = getHeroesByPublisher( publisher );
    
    return (
        <div className="card-columns" >
            {
                heores.map( hero => (
                    <HeroeCard 
                        key={ hero.id } 
                        { ...hero }
                    />
                ) )
            }
        </div>
    )
}

export default HeroesList

最后这里是“HeoresList”组件将被重新命名以显示在其各自屏幕中的地方。

import React from 'react'
import HeroesList from '../heroes/HeroesList'

const MarvelScreen = () => {
    return (
        <>
          <h1> Marvel Screen </h1> 
          <hr/> 

          <HeroesList publisher="Marvel Comics"/>
        </>
    )
}

export default MarvelScreen

这是执行代码时的结果图像。

还可以使用 Chrome 的开发人员工具解析 HTML 属性。并且“img”标签贡品显示正确。

最后是我的“公共”文件夹的结构。

Answer 1

在我看来，您有两个英雄文件夹，一个嵌套在另一个文件夹中。尝试像这样修改 src：

 <img src={ `./assets/heroes/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />

Answer 2

<img src={ `./assets/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />

当您使用 . 时，它是相对于原始位置的路径。你应该使用
<img src={ /assets/heroes/id.jpg } className="card-img" alt={ superhero } />
或
<img src={ ../../../../public/assets/heroes/id.jpg } className="card-img" alt={ superhero } />
它有点长。问答

“img”标签中的图片不加载

2 个答案: