Javascript 使用道具传递图像url

我正试图用道具在两个组件之间发送一些图标。我导入URL并使用它来创建prop对象。 这是我的主要文件

import { useState } from 'react';
import SapIcon from '../images/logo_sap.png';
import ExcelIcon from '../images/logo_excel.png';
import OutlookIcon from '../images/logo_outlook.png';
import BrowserIcon from '../images/logo_webbrowser.png';
import OneDriveIcon from '../images/logo_onedrive.png';
import XhisIcon from '../images/logo_xhis.png';

import LeftBlock from './LeftBlock';

const BotsGrid = () => {
    const [icons, setIcons] = useState([{ 
        SapIcon: { SapIcon }, 
        ExcelIcon: { ExcelIcon }, 
        OutlookIcon: { OutlookIcon },
        BrowserIcon: { BrowserIcon },
        OneDriveIcon: { OneDriveIcon },
        XhisIcon: { XhisIcon }
    }]);

    console.log(icons.SapIcon);

    return (  
        <div className='BotsGrid'>
            <div class="site-section bg-light">
                <div class="container">

                <LeftBlock icons={icons} />

                </div>
            </div>
        </div>
    );
}
export default BotsGrid;

从'react'导入{useState}；
从“../images/logo_sap.png”导入SapIcon；
从“../images/logo_excel.png”导入excel图标；
从“../images/logo_outlook.png”导入outlook图标；
从“../images/logo_webbrowser.png”导入浏览器图标；
从“../images/logo_onedrive.png”导入OneDriveIcon；
从“../images/logo_xhis.png”导入Xhiscon；
从“./LeftBlock”导入LeftBlock；
常量网格=（）=>{
const[icons，setIcons]=useState（[{
SapIcon:{SapIcon}，
ExcelIcon:{ExcelIcon}，
了望图标：{OutlookIcon}，
BrowserIcon:{BrowserIcon}，
OneDriveIcon:{OneDriveIcon}，
xhiscon:{xhiscon}
}]);
console.log（icons.SapIcon）；
报税表（
);
}
导出默认网格；

我尝试在我的LeftBlock.js文件中导入此道具，但这不起作用

const LeftBlock = (props) => {
    const icons = props.icons;


    return (  
        <div className="LeftBlock">
            <div class="row">
                <div class="col-lg-6">

                    <div class="d-flex tutorial-item mb-4">
                        <div class="container">
                            <h3><a href="#">Test</a></h3>
                            <img src={ icons.SapIcon } alt="Image" width="12%" height="12%" class='mr-4'/>
                            <img src={ icons.ExcelIcon } alt="Image" width="8%" height="8%" class='mr-4' />
                            <img src={ icons.OutlookIcon } alt="Image" width="8%" height="8%" class='mr-4' />
                            </p>
                            <p class="meta">
                            <span class="mr-2 mb-2">Business</span>
                            </p>
                            <p><a href="bot_carga_fc_prov.html" class="btn btn-primary custom-btn">Details</a></p>
                        </div>
                    </div>

constleftblock=（道具）=>{
常量图标=道具图标；
报税表（


生意

---

我需要一些帮助，因为页面没有显示图标。

您使用的是数组，请删除它

const BotsGrid = () => {
const [icons, setIcons] = useState({ 
    SapIcon: SapIcon ,
    ExcelIcon: ExcelIcon,
    OutlookIcon: OutlookIcon ,
    BrowserIcon: BrowserIcon,
    OneDriveIcon: OneDriveIcon,
    XhisIcon: XhisIcon
});

---

您正在使用一个数组，请删除它

const BotsGrid = () => {
const [icons, setIcons] = useState({ 
    SapIcon: SapIcon ,
    ExcelIcon: ExcelIcon,
    OutlookIcon: OutlookIcon ,
    BrowserIcon: BrowserIcon,
    OneDriveIcon: OneDriveIcon,
    XhisIcon: XhisIcon
});

---

我试过了，现在似乎我可以通过这些物体了，但是图像还没有工作，它说当我检查元素时，这是我的错，我使用了{}调用iIimported的图像链接，现在可以了！非常感谢！我尝试过，似乎现在可以传递对象，但是图像还没有工作，它说当我检查元素时，这是我的错，我使用{}调用iIimported的图像链接，现在可以了！非常感谢！