时间戳

首页 > 解决方案 > Graphql/Apollo/React 无法导入本地图片

reactjs - Graphql/Apollo/React 无法导入本地图片

问题描述

几天前我刚开始玩 Graphql/Apollo，今天我遇到了这个问题。我有大导航栏，每个链接都有图标。有我的代码：

let nav_options = [
{
 name: 'Dashboard',
 image: 'pictures/icons/dashboard.png',
 link: '/#'
},
{
 name: 'Report',
 image: './pictures/icons/dashboard.png',
 link: '/#'
},
]

接着

export const Routes = () => (
 <Router>
  <div class="app-container">
   <nav class="main-menu">
    <ul>
    {nav_options.map(option => (
      <li>
        <Link to={option.link}>
        <input className="icon" type="image" src={option.image} />
          <span class="nav-text">
            {option.name}
          </span>
        </Link>
      </li>
    ))}

{option.name} 和 {option.link} 工作完美。我觉得我错过了什么。？

我修好了：这就是

image: require('pictures/icons/dashboard.png'),

标签： reactjsgraphqlapollo

解决方案

您需要要求或导入图像。

    let nav_options = [ 
{ 
 name: 'Dashboard',
 image: require('pictures/icons/dashboard.png'),
 link: '/#'
}, 
{ 
 name: 'Report',
 image: require ('./pictures/icons/dashboard.png'), 
link: '/#' 
}, 
]

推荐阅读