Блог

Я пытаюсь создать логотип для использования с навигационной панелью в моем приложении react, используя react bootstrap, и я использовал документацию в качестве руководства. Однако при просмотре страницы с использованием localhost://3000 отображается следующее:

Что я делаю не так? Я даже попытался скопировать фрагмент кода примера с сайта документации в свой проект, и то же самое отображается. Тем не менее, я открываю файл svg без каких-либо проблем в самом Chrome. Вот мой код для App.js:

 import React from 'react';
import './App.css';
import {
  BrowserRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import Container from 'react-bootstrap/Container'
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';

class App extends React.Component {
  constructor(props) {
    super();
    this.state = {
      title: "Danny's Website",
      headerLinks: [
        { title: 'Home', path: '/' },
        { title: 'Projects', path: '/projects' },
        { title: 'Documents', path: '/documents' },
        { title: 'Contact Me', path: '/contact' }
      ],
      home: {
        title: 'Hey there!',
        subtitle: 'Welcome to my personal website.',
        text: 'Placeholder text for now',
      },
      projects: {
        title: 'My Projects',
        subtitle: "From app development to tinkering with robots, I've tried it all",
      },
      documents: {
        title: 'So you wanna see my deets, huh?',
      },
      contact: {
        title: "Let's get in touch",
      }

    }
  }

  render() {
    return (
      <Router>
        <Container fluid={true} className='p-0'>  { /*Fluid false = Huge left margin. Change padding via "className='p-0'" */}
          <Navbar expand="lg" bg="light" variant="light" className="border-bottom">
            <Navbar.Brand href="#home" >
              <img 
                alt=""
                src="/bootstrap-solid.png" 
                width="30px" 
                height="30px" 
                className="d-inline-block align-top"/>{' '}
            Home Site
          </Navbar.Brand>
            <Navbar.Toggle className="border-0" aria-controls="navbar-toggle" />
            <Navbar.Collapse id="navbar-toggle">
              <Nav className="ml-auto">
                <Link className="nav-link" to="/">Home</Link>
                <Link className="nav-link" to="/projects">Projects</Link>
                <Link className="nav-link" to="/documents">Documents</Link>
                <Link className="nav-link" to="/contact">Contact Me</Link>
              </Nav>
            </Navbar.Collapse>
          </Navbar>
        </Container>
      </Router>

    );
  }

}

export default App;

  

 import Logo from '../../images/telcomlogo.jpg';  //  src/images


<Navbar.Brand >
<Link to="/home">
<img width="70px" height="auto" className="img-responsive" src={Logo}  alt="logo" />
               
</Link>
</Navbar.Brand>
  

Ответ пользователя RK_oo7 в разделе комментариев правильный. Ссылка на логотип в исходном коде верна, но логотип должен быть расположен в общей папке, а не в src.

поскольку вы используете react-bootstrap, а в документации react-bootstrap говорится: «В любое время, когда вам нужно отобразить часть содержимого, например изображение с необязательной подписью, рассмотрите возможность использования рисунка».

так что, возможно, в вашем случае вы можете сначала импортировать файл изображения и назвать его псевдонимом по своему усмотрению…

 import imagenameasyouwant from '../../assets/img//bootstrap-solid.png';
  

затем вы можете вызвать imagenameasyouwant на «рисунке»

 <Figure><Figure.Image width={100} height={50} alt="100x50" src={imagenameasyouwant} /></Figure>
  

полную документацию о react-bootstrap figure вы можете найти в react-bootstrap documentation about figure

Возникла та же проблема, но ее решили, просто добавив оператор import и сославшись на него в атрибуте src img.

Работает нормально даже без рисунка.