Доступ к изображениям из общедоступной папки

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

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

🤔 А знаете ли вы, что...
С помощью CSS можно создавать адаптивные изображения, которые подстраиваются под размер экрана.


1
9 864
2

Ответы:

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

  • Вам нужен файл с определенным именем в выходных данных сборки, например манифест.вебманифест.
  • У вас есть тысячи изображений, и вам нужно динамически ссылаться на их пути.
  • Вы хотите включить небольшой скрипт например, paste.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

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