Я пытаюсь получить доступ к about-bg.jpg, расположенному в папках frontend->public->img из styles.css, но как бы я ни пытался вставить '../../' или '../' или '../../../', похоже, не сработало. Как мне решить эту проблему? Заранее большое спасибо и очень признателен за любую помощь
Вот структура каталогов приложения реакции
🤔 А знаете ли вы, что...
С помощью CSS можно создавать адаптивные изображения, которые подстраиваются под размер экрана.
Причина, по которой это не работает, заключается в том, что у вас нет сервера, на котором размещены файлы. Изображения запрашиваются не с локального диска, а с веб-сервера, который обслуживает реагирующее приложение. Я настоятельно рекомендую вам создать экспресс-сервер, на котором размещены каталог dist
и каталог public
, в котором существуют эти изображения. Для этого вы также можете использовать nginx. В любом случае вам понадобится веб-сервер для размещения всего приложения.
Вот пример экспресс-сервера, который я использовал для разработки своего последнего приложения.
const express = require('express')
const compression = require('compression')
const path = require('path')
const wwwhisper = require('connect-wwwhisper')
const dotenv = require('dotenv')
dotenv.config()
const app = express()
const port = process.env.PORT || 3000
app.use(compression())
// serve files from dist
app.use(express.static(path.resolve(__dirname, '../../client/dist')))
// serve files from static
app.use('/cards', express.static(__dirname + '/../static/cards'))
// spa catch all
app.get('*', (request, response) => {
response.sendFile(path.join(__dirname, '../../client/dist/index.html'))
})
app.listen(port, () => console.info(`Server started on port ${port}.`))
Это размещается на героку, отсюда и const port = process.env.PORT || 3000
. Если вы знаете порт, на который будет сопоставлено живое приложение в контейнере, вам это не понадобится.
Вам просто нужно переназначить абсолютный путь express.static туда, где находятся ваши изображения и где создан ваш каталог dist.
Для create-react-app
рекомендуется импортировать таблицы стилей, изображения и шрифты из JavaScript и использовать public
только в следующих случаях:
вы по-прежнему можете получить к нему доступ, поставив лайк process.env.PUBLIC
render() {
// Note: this is an escape hatch and should be used sparingly!
// Normally we recommend using `import` for getting asset URLs
// as described in “Adding Images and Fonts” above this section.
return <img src = {process.env.PUBLIC_URL + '/img/logo.png'} />;
}
вы можете прочитать больше здесь: https://create-react-app.dev/docs/using-the-public-folder/
при этом правильным способом было бы иметь папку с ресурсами в корне вашего приложения. Вы можете называть это как хотите, это не обязательно assets
а затем вы можете ссылаться на него в своем css
<div className = "logo" alt = "logo" />
.logo {
height: 200px;
width: 200px;
pointer-events: none;
background-image: url('./assets/logo.svg');
background-size: cover;
background-position: center;
}
это результат
если у вас возникли проблемы с вводом относительных путей, то есть ../../../assets
по мере того, как ваше приложение становится больше, вы можете использовать стороннюю библиотеку, например react-app-rewired
, для настройки относительных путей. Вот статья , в которой описывается, как это сделать с помощью create-react-app
, или вы можете использовать абсолютный импорт, настроив jsconfig.json
, вот статья для абсолютного пути