如何使用从 React.js 中的数据库检索的图像路径显示图像答案

【问题标题】：How to Display image using image path retrieved from database in React.js如何使用从 React.js 中的数据库检索的图像路径显示图像
【发布时间】：2021-03-05 16:08:09
【问题描述】：

我正在尝试使用 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 &amp; 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}} />

【问题讨论】：

您好，欢迎来到 SO。您能否控制台日志并显示 products.productImagePath 中的内容。它是服务器中图像文件的路径还是 blob 还是任何生成的 url？
@Darkshadow 其显示例如：productImagePath: "./css/image/thestandard.png"
@Darkshadow 有什么想法吗？提前致谢。

标签： reactjs laravel image api axios

【解决方案1】：

我找到了在公共文件夹中创建图像文件并将路径添加到数据库的解决方案，例如：数据库将类似于'image/123.png'

【讨论】：