javascript - “img”标签中的图片无法加载
问题描述
几天前,我开始创建一个 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”标签贡品显示正确。
最后是我的“公共”文件夹的结构。
解决方案
在我看来,您有两个英雄文件夹,一个嵌套在另一个文件夹中。尝试像这样修改 src:
<img src={ `./assets/heroes/heroes/${ id }.jpg` } className="card-img" alt={ superhero } />
推荐阅读
- ionic3 - ionic 3 动态改变网格
- angular - 为什么 nrwl/nx 比 angular@6 vanilia 更好?
- powershell - 变量是数组而不是字符串?
- html - 使用 ionic 3.9.2 版本的 ion-scroll 容器中的单击和滑动效果不起作用
- android - 如何获取可绘制文件夹中可用图像的 Image.getPlanes() 信息?
- php - Laravel 5.6 中 3 个模型之间的关系
- android - 无法断开并重新连接到 BLE 工具 android
- vbscript - 无法使用脚本下载 Windows 更新
- jenkins - jenkins 会自动删除工作区的代码,然后每次重新拉代码来构建
- codeigniter - Codeigniter 只能显示默认控制器