我在 xampp 的 MySQL 中有一个表 Products。它有 ID、名称、价格、数量和图像的 img1、img2 列。我想在前端显示数据

Question

所以我使用 multer 将上传的文件存储在本地存储中的 uploads 文件夹中。我的数据输入工作正常。两个 img 列包含唯一的文件名，实际文件位于 uploads 文件夹中。在我的前端我想显示产品详情如下

`    <div className="row product-grid">
           {products.map((product) => (
            <div className="col-md-3 my-4" key={product.id}>
              <Link to={`/ProductWelcome/${product.id}`} className="product-link">
                <div className="product">
                  <div className="product-image">
                    {product.Images.map((image, index) => (
                      
                      <img
                        key={index}
                        src={`/uploads/${image}`}
                        alt={`${product.ProductName} Image ${index + 1}`}
                      />
                    ))}  
                      </div>
                      <div className="product-details">
                        <h3 dangerouslySetInnerHTML={{ __html:            highlightMatchingLetters(product.name, searchQuery) }} />
                        <p className="description">{product.description}</p>
                        <p className="price">{product.price}</p>
 `

现在这是一个我想用来在前端查看图像和相关数据的API

这是在我的服务器中，js文件（在后端）

``app.use('/uploads', express.static(path.join(__dirname, '`your text`uploads')));

app.get('/api/products', (req, res) => {
  const sql = 'SELECT * FROM products';
  db.query(sql, (err, results) => {
    if (err) {
      console.error('Error fetching product data:', err);
      res.status(500).json({ error: 'Error fetching product data' });
    } else {
      console.log('Fetched product data:', results);
      const productsWithImages = results.map((product) => ({
        ...product,
        Images: JSON.parse(product.Images),
      }));

      console.log('Fetched product data:', productsWithImages);
      
      // Assuming productsWithImages is an array of product objects with images.
      // You can also log the first product's image filenames for testing.
      if (productsWithImages.length > 0) {
        console.log('First product image filenames:', productsWithImages[0].Images);
      }

      res.json(productsWithImages);
    }
  });
});`

` 但它没有按预期工作。我的产品没有显示在前端。有人可以帮助我吗？我在react中这样做，在xampp中使用MYSQl数据库

我希望在前端显示产品图像和数据，但没有显示任何内容。此外，我的服务器中的控制台日志，js 没有打印任何内容。是否未正确获取数据？我尝试了很多方法但无法弄清楚。请帮助我

这个错误也显示在前端

Home.js:37 获取产品数据时出错：SyntaxError: 意外的标记 '<', "

1。如果您将实际的二进制图像数据存储在img1列中（MySQL中的BLOB数据类型），那么product.img1将是一个二进制缓冲区或数据。在这种情况下，您需要适当地处理二进制数据以将其显示为图像。您可能需要将其转换为数据 URL 或使用像 React-image 这样的库来显示图像。

<img src={`data:image/jpeg;base64,${product.img1.toString('base64')}`} alt={product.name} />

2。图像路径：如果您将图像文件的路径存储在 img1 列中，则 Product.img1 将是包含文件路径的字符串。在这种情况下，您可以在 HTML 中元素的 src 属性中使用此路径，以在 React 前端中显示图像。该路径通常是 URL 或服务器上图像文件的相对路径或公共 URL。

<img src={product.img1} alt={product.name} />

Answer 1