如何解决尝试使用来自node.js服务器的React useEffect和useState加载图像的动态路径
我正在尝试从服务器获取的内容中加载图像。图像保存在前端的资产文件夹中。我最终得到:“错误:无法加载模块'./'”我认为是因为尝试返回HTML时未填充状态。当我仅加载路径名时,它可以工作,但在尝试加载img时却不行?自学编码员的任何帮助都会有所帮助。
export default function PlaceBids(props) {
const [quoteImage,setQuoteImage] = useState('')
useEffect(() => {
fetch('/api/bids?bids=' + props.quoteNumber,{
credentials: 'same-origin',})
.then(res => res.json())
.then((res) => {
if (res.loggedIn === false) {
return null
}
if (res.success) {
setQuoteImage(res.quoteImage)
}
else {
setQuoteImage(res.quoteImage)
}
}
)
},[])
return (
<div>
<img src={require('../assets/models/' + quoteImage)}/>
</div>
)
}
解决方法
这就是我会尝试的。
G2
这就是我在React JS中处理简单图像显示的方式。如果您有(或可以)将代码放入codesandbox或其他东西中,也许我可以测试一下是否真的适合您。
基本上,由于我是从API获取完整图片网址的,因此我绕过了本地文件夹。
渲染#1
图像将被渲染,但是没有图像,因此它只会说“在api上显示图像”。
然后,useEffect将调用该API,当API成功后,它将触发状态更改并再次要求渲染,但这一次,您将发送API响应。
渲染#2
图像使用data.quoteImage处的图像路径进行渲染。
note:我假设这是图像显示的简单情况,因为我也是初学者。但是,如果这要复杂得多,那么社区中的其他人应该可以为您提供帮助。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。