Блог

Я пытаюсь получить доступ к about-bg.jpg находится в папках frontend-> public-> img из styles.css, но независимо от того, как я пытался вставить ‘.. / .. /’ или ‘.. /’ или ‘.. / .. / .. /’, похоже, это не сработало. Как мне решить эту проблему? Заранее большое спасибо и с благодарностью за любую помощь

Вот структура каталогов приложения react

Для create-react-app рекомендуется импортировать таблицы стилей, изображения и шрифты из JavaScript и использовать только public в этих случаях:

• Вам нужен файл с определенным именем в выходных данных сборки, например manifest .веб-манифест.
• У вас есть тысячи изображений, и вам необходимо динамически ссылаться на их пути.
• Вы хотите включить небольшой скрипт, например pace.js за пределами связанного кода.
• Некоторые библиотеки могут быть несовместимы с webpack, и у вас нет другого выбора, кроме как включить их в качестве тега.

вы все равно можете получить доступ к этому, используя 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 в корне вашего приложения. вы можете называть это как угодно, это не обязательно 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 , вот статья для абсолютного пути

Причина, по которой это не работает, заключается в том, что у вас нет сервера, на котором размещаются файлы. Изображения запрашиваются не с локального диска, а с веб-сервера, который обслуживает приложение react. Я настоятельно рекомендую вам создать экспресс-сервер, на котором размещается dist каталог и public каталог, в котором существуют эти изображения. Вы также можете использовать nginx для этого. В любом случае вам понадобится какой-либо веб-сервер для размещения всего приложения.

Вот пример сервера Express, который я использовал для разработки своего последнего приложения.

 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.log(`Server started on port ${port}.`))
 

Это размещается на heroku, следовательно const port = process.env.PORT || 3000 . Если вы знаете порт, на который будет отображаться приложение live в контейнере, вам это не понадобится.

Вы просто захотите повторно сопоставить абсолютный путь express.static с тем, где находятся ваши изображения и где создается ваш каталог dist.