我有一个奇怪的问题,我的导航栏的图像是不显示,我不知道为什么。我试过玩不同的大小和图像,但不是没有显示只有alt消息。此外,它应该被链接到正确的目录。如果有人能看一下代码并帮助我,我将非常高兴。
The JSX
```
import React from 'react';
import { NavLink } from 'react-router-dom';
const Navbar = () => (
<nav className="navbar">
<h1 className="title">
<NavLink className="logo" to="/">
David's Bookstore
</NavLink>
</h1>
<ul className="nav-links">
<li>
<NavLink to="/" className="nav-link">
Books
</NavLink>
</li>
<li>
<NavLink to="/categories" className="nav-link">
Categories
</NavLink>
</li>
<img src="../images/user.png" alt="profile" className="img-user" />
</ul>
</nav>
);
export default Navbar;
```
And the CSS
```
.img-user {
width: 50px;
}
* {
box-sizing: border-box;
}
.nav-link {
color: #121212 !important;
font-size: 1.413rem;
font-weight: 400;
letter-spacing: 1.9px;
}
.body {
margin: 0;
}
.navbar {
height: 60px;
top: 30px;
display: flex;
flex-direction: row;
align-items: center;
gap: 50px;
padding: 3rem 6rem;
border: 1px solid whitesmoke;
background-color: #f8f8f8;
}
.navbar a {
color: #fff;
text-decoration: none;
align-items: center;
gap: 2rem;
padding: 0 1rem;
height: 100%;
display: flex;
}
.navbar ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 20px;
}
.navbar li {
font-size: 1.413rem;
font-weight: 400;
color: darkgray;
}
.logo {
font-size: 2.875rem;
font-weight: 900;
color: #d51284;
}
```
我试了各种各样的图标,不同的大小,但没有显示。
假设您的images文件夹位于公共目录中,则将路径指向图像,如下所示:
<img src="./images/user.png" alt="profile" className="img-user" />
不要用两个…就一个)