图片未加载反应答案

【问题标题】：Image not loading React图片未加载反应
【发布时间】：2021-03-18 06:04:12
【问题描述】：

我在这个电子商务网站工作，但遇到了一些麻烦。一切正常，但图片无法加载。

Data code 这是图像中显示的信息。

Website img src 代码不起作用

如您所见，我已经输入了图像文件的路径，但我不知道是什么原因导致图像无法加载。

此代码是产品信息：

export const Data = [
{
    _id:1,
    img:'images/lightsaber.png',
    title:'Light Saber',
    price:'570',
    category:'weapon',
    details:'Lightsabers consisted of a plasma blade, powered by a kyber crystal, that was emitted from a usually metal hilt and could be shut off at will.',
    count:1,
    isInCart: false
}

这是应该展示产品的地方：

    import React from 'react';
import { BrowserRouter, Link } from 'react-router-dom';
import { Data } from './Data';

const Product = (props) => {

    const {data} = props;

    return (
        <BrowserRouter>
            <div className="product">
                <div className="box-img">
                    <Link to={'/details/${data._id}'}> <img src={data.img} alt={data.name}></img> </Link>
                </div>

                <div className="product-details">
                    <h3>{data.title}</h3>
                    <h4>${data.price}</h4>
                </div>

                <div className="product-btn">
                    <button>Add to cart</button>
                </div>

                <div className="inCart">
                    <span>Already in cart</span>
                </div>
                
            </div>

        </BrowserRouter>
    )
}

export default Product;

图像在名为“图像”的粘贴中

【问题讨论】：

如何使用<Product />组件？你确定你在那里通过data 吗？同样重要的是要注意您的文件包含一个数组，可能您需要使用.map() 来迭代以表示您所期望的每个元素。

标签： javascript reactjs

【解决方案1】：

您必须提供每张图片的完整地址。假设您在本地服务器上运行代码（例如 http://localhost:3001 ）并且您的图像位于“images”子文件夹的项目文件夹中，每个图像的正确地址将是这两者的组合： http://localhost:3001/images/image_name

您可以执行以下操作：

const BaseUrl = *your server's address*
<img src={data.img} alt={BaseUrl + data.name}></img>

【讨论】：

有错别字，正确的做法是：src={BaseUrl + data.img}