reactjs - 如何使用从 React.js 中的数据库检索的图像路径显示图像
问题描述
我正在尝试使用 api axios 显示图像,api 正在从数据库中检索路径图像,但图像未加载
import axios from 'axios';
类产品扩展组件{
state={
products:[],
};
componentDidMount() {
axios.get(`http://localhost/CraveByMarwa/public/api/products`)
.then(res => {
const products = res.data;
this.setState({ products });
})
}
render() {
return (
<div>
<div className="block-section big-spacer">
<div className="container">
<h3 className="section-title" data-aos="fade-up" style={{fontSize: 55, textAlign: 'center'}}>
<span style={{color: 'rgba(209, 0, 0, 1)'}}>Plans & Pricing
</span>
</h3>
</div>
<div className="container">
<div className="row">
{ this.state.products.map(products =>
<div className="col-md-4">
<div className="block-img">
<div className="flip-card">
<div className="flip-card-inner">
<div className="flip-card-front">
<img src={products.productImagePath} alt={products.title} style={{width: 300, height: 500}} />
解决方案
我找到了在公共文件夹中创建图像文件并将路径添加到数据库的解决方案,例如:数据库将类似于 'image/123.png'
推荐阅读
- r - 忽略非整数的 R 数据抑制
- matlab - 显示所需帧数的静态图像序列MATLAB的问题
- reactjs - 浏览器重绘/重排
- driverless-ai - H20 无人驾驶 AI,无法加载自定义配方
- python - 在 Python 中传递 MySQL CREATE TABLE SELECT 查询会引发语法错误
- flutter - 计步器颤振包错误 MissingPluginException(未找到方法在通道 step_detection 上侦听的实现)
- r - “kernelUD 中的错误:至少需要 5 次重定位才能适应主范围”,但每组的重定位数超过 5
- sql-server - 从另一个容器 spring boot 连接到 docker 容器中的 mysql
- javascript - Chrome“无法拖动”图标干扰了鼠标悬停事件,我该如何防止这种情况?
- python - 过滤行数据并将其相加,看看它是否可以通过 reduce() 结合 filter() 给出结果