如何使用React js在浏览器中显示本地数据库图像

Question

        new Product
        {
            Id = 2,
            CategoryId = 2,
            BrandId=5,
            ProductName = "Galaxy S23",
            Stock = 20,
            Price = 24999,
            CreatedTime = DateTime.UtcNow,
            ProductImage= "C:\\Users\\serka\\OneDrive\\Masaüstü\\Staj\\Ecommerce\\Core\\ProductImages\\s23ımage.jpg"
        },

这是我的实体会话，我添加了产品图像的路径，我想在反应中将其反映在我的网站上

export const getAllProducts = async () => {
  try {
    const response = await getProductlist();

    const products = response.data.data.map((product) => ({
      id: product.id,
      name: product.productName,
      brand: getBrandNameById(product.brandId),
      price: product.price,
      image: product.productImage,
    }));
    console.log(products);
    return products;
  } catch (error) {
    console.error("ürün yükleme hatası", error.message);
    return [];
  }
};

const getProductlist = async () => {
  try {
    const response = await axios.get("https://localhost:7001/api/Product/All");
    return response;
  } catch (error) {
    throw new Error("Ürünleri alma hatası: " + error.message);
  }
};

        <ul className="product-list">
          {products.map((product) => (
            <ProductItem
              key={product.id}
              imageSrc={product.image}
              name={product.name}
              brand={product.brand}
              price={product.price}
            />
          ))}
        </ul>

const ProductItem = ({ imageSrc, name, price, brand }) => {
  console.log(imageSrc);
  return (
    <li className="product-item">
      <a href="#">
        <img src={imageSrc} alt="" className="product-image" />
        <h3 className="Product-name"> {name} </h3>
        <p className="product-price"> {price} TL</p>
        <p className="product-brand"> Marka:{brand}</p>
        <button className="product-cart-button"> Sepete Ekle </button>
      </a>
    </li>
  );
};

上面是我将种子、API 连接和数据传输到对等点的 ProductItem 块，我无法在页面上打印我的图像，我应该遵循什么路径？

我从谷歌驱动器中获取了一个“https”链接并分配了它，我还注意到该链接是公开的，但我无法再次获取图像，我尝试了两种方法，使用replaceAll将“//”符号更改为“ ”和“/”，我还没有找到解决方案，我正在等待你的帮助，谢谢。

Answer 1

据我所知，本地驱动器（您的设备）中的图像无法通过 url 访问。您必须将图像上传到 s3 等存储桶或服务器内的文件夹（可以使用您的项目公共文件夹）中。然后为该图像创建一个 url 并将该图像 url 传递给

<img/>

。这样您就可以访问它。

如果不先导入公共文件夹之外的任何图像，项目将无法访问它。