从本地文件夹动态更改React中的背景图像
从本地文件夹动态更改React中的背景图像
提问于 2020-09-28 04:13:23
我一直试图在我的React应用程序上动态加载背景图片，但只有当我链接到我的Google drive时才能起作用。我想在本地执行此操作，并且我已将图像粘贴到即时目录中。但它仍然无法加载到我的应用程序中。我有21个图像从0-20所有png格式在src文件夹中
var bgp = Math.floor(Math.random() * 20);
this.setState({
chrome: color,
photo: bgp,
quote: randomQuote.quote,
author: randomQuote.name
})
render() {
var bodyP = {
backgroundImage: `url(${onUse}.png)`,
transition: 'all linear 2.5s',
height: '100vh',
width: '100vw',
}
return ( <div id = "wrapper" onLoad = {this.getQuote} style = {bodyP} >
</div>
)回答 2
Stack Overflow用户
发布于 2020-09-28 05:08:40
如果它以前在Gogle盘上工作得很好，那么我很确定这是你写目录路径的一个问题。如果图像没有渲染，尝试创建并写入指向其中一张图片的路径，然后继续尝试找到正确的方法来写入路径或查看一些文档，直到看到图像渲染为止，之后，您可以在代码中使用正确的目录路径。希望这对你有用。
Stack Overflow用户
发布于 2020-09-30 20:16:32
我已经弄明白了。我将照片文件夹移动到公共文件夹，然后使用https://create-react-app.dev/docs/using-the-public-folder/解释的公共路径的(process.env.PUBLIC_URL)文件路径描述，并导航到照片文件夹。所以我的代码看起来像这样：
getPhoto() {
var bgp = Math.floor(Math.random() * 20);
this.setState({
photo: bgp,
})
}
var onUse = process.env.PUBLIC_URL + "/Quote-photos/"+ this.state.photo + '.png';
var bodyP = {backgroundImage: `url(${onUse})`,
transition: 'all linear 2.5s',
height: '100vh',
width: '100vw'}
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64092893
复制相关文章
相似问题
腾讯云开发者
