如何使用react.js加载具有动态URL的特定照片

Question

我有一个组件，其中渲染了一个图片列表，它运行得非常好：

import { Component} from 'react'
import Header from '../Home/Header'
import Footer from '../Home/Footer'
import PhotoItems from './objet'
class Photos1930 extends Component {
render() {
return (
<div>
<Header />
<h2 className='titre bloc'>Photos 1930</h2>
<div className='bloc bloc__photo'>
{PhotoItems.map((val, key) => {
let id = val.id
let url = val.url
let lienImage = "/galerie/:" + (val.id)
return <div key={id}>
<a href={lienImage}>
<img className='photo' alt='Photo Charles-Quint' src={url}></img>
</a>
</div>
})}
</div>
<Footer />
</div>

)
}
}

export default Photos1930

我想创建一个其他组件，当用户点击先例列表中的图片时，我可以加载特定的图片。我使用相同的逻辑，但由于某种原因，图片无法加载。我的控制台中没有任何错误，但在我的页面上，我的alt。所有图片都在公用文件夹中。我只是不明白为什么它对一个组件有效，而对另一个组件无效。

import { Component } from 'react'
import Header from '../Home/Header'
import Footer from '../Home/Footer'
import PhotoItems from './objet'
const url = window.location.pathname
const justId = parseInt((url.split(':')[1]))
function specificId(photo) {
return photo.id === (justId)
}
let justUrl = (PhotoItems.find(specificId).url)
console.log(justUrl)
class PickPhoto extends Component {
render() {
return (
<div>
<Header />
<div>
<h1>{justId}</h1>
<img className="bigPhoto" alt="Charles-Quint" src={justUrl}></img>
</div>
<Footer />
</div>
)
}
}

export default PickPhoto

第1版：这是我的github回购：https://github.com/FranMori/CharlesQuint这是我的netlify链接：https://stoic-bohr-810e13.netlify.app/您可以点击"；Galerie Photos"然后单击任意图片查看问题。

Answer 1

在您的repo中，this.justUrl未定义。您需要在组件的状态中添加justUrl，并在componentDidMount内动态更新，如下所示。我还在src={/${this.state.justUrl}}中添加了一个/

import { Component } from 'react'
import Header from '../Home/Header'
import Footer from '../Home/Footer'
import PhotoItems from './objet'

class PickPhoto extends Component {
constructor() {
super()
this.state = { justUrl: "" };
}
componentDidMount() {
const url = window.location.pathname
const justId = parseInt((url.split(':')[1]))
function specificId(photo) {
return photo.id === justId
}
let justUrl = (PhotoItems.find(specificId).url)
console.log(justUrl)
this.setState({justUrl})
}
render() {
return (
<div>
<Header />
<div>
<h1>{this.justId}</h1>
<img className="bigPhoto" alt="Charles-Quint" src={`/${this.state.justUrl}`}></img>
</div>
<Footer />
</div>
)
}
}

export default PickPhoto