Я добавил через npm модуль holderjs
npm install holderjs
но теперь не знаю как его использовать. В описании пакета написано что необходимо в HTML добавить
<script src="holder.js"></script>
однако все равно ничего не работает. Если в компонент импортировать модуль, то он сработает один раз (при загрузке), но после повторного открытия с помощью Route
(react-router-dom) картинка не загружается.
Код главного компонента
import React from 'react';
import './App.css';
import Header from './components/Header';
import Footer from './components/Footer';
import Home from "./components/Home";
import Workspace from "./components/Workspace";
import NoFound from "./components/NoFound";
import {BrowserRouter, Route, Switch} from "react-router-dom"
function App() {
return (
<BrowserRouter>
<div>
<Header/>
<Switch>
<Route exact path='/'>
<Home/> //<---тут находится картинка
</Route>
<Route path='/workspace'>
<Workspace/>
</Route>
<Route>
<NoFound/>
</Route>
</Switch>
<Footer/>
</div>
</BrowserRouter>
);
}
export default App;
Внутренний компонент
import React, {Component} from 'react';
import '../styles/styles.css';
import {Carousel, Jumbotron} from "react-bootstrap";
import 'holderjs'
class Home extends Component{
render() {
return(
<div>
<Carousel>
<Carousel.Item>
<img //<---Тут картинка, остальное не особо важно
className="d-block w-100"
src="holder.js/800x400?text=First slide&bg=373940"
alt="First slide"
/>
<Carousel.Caption>
<h3>First slide label</h3>
<p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Second slide&bg=282c34"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Second slide label</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</Carousel.Caption>
</Carousel.Item>
<Carousel.Item>
<img
className="d-block w-100"
src="holder.js/800x400?text=Third slide&bg=20232a"
alt="Third slide"
/>
<Carousel.Caption>
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
</Carousel.Caption>
</Carousel.Item>
</Carousel>
<div className="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-light">
<Jumbotron>
<h1>Hello, world!</h1>
<p>
This is a simple hero unit, a simple jumbotron-style component for calling
extra attention to featured content or information.
</p>
</Jumbotron>
</div>
</div>
)
}
}
export default Home;
При первом открытии странички картинка загружается, но с src=data:image/svg+xml;charset=UTF-8,%3Csvg%20width%3D%22800%22%20height%3D%22400%22%20xmlns%3D%22http%3A%2F%2F...и много других знаков
но после переключения вкладок (например в другую, а потом вернуться обратно и без перезагрузки) эта ссылка становиться такой же как и в jsx src="holder.js/800x400?text=First slide&bg=373940"
и, собственно говоря, по ней ничего нет