Реакция: 404 найдено при импорте локальных изображений - PullRequest
Новая
       8

Реакция: 404 найдено при импорте локальных изображений

0 голосов
/ 09 июля 2020

У меня проблемы с отображением изображения на моем личном веб-сайте. Я использую React для отображения каждой страницы своего сайта. На моей странице AboutMe я успешно импортировал изображение и правильно его отобразил, тогда как у Webpack не было проблем с созданием и поиском изображения. Как вы можете видеть ниже, я написал следующее:

import img from '../../../public/assets/images/linked-in-profile.jpg'

<Col>
   <img className="about-image" src={img} />
</Col>

Однако на моей странице «Проекты» я пытаюсь иметь Bootstrap карточек, содержащих изображения. Я выполнил те же шаги, что и на моей странице AboutMe; Я импортировал изображение и добавил свой тег на свою карточку. Когда я проверяю свой сайт, работающий на локальном хосте, изображение не отображается, и моя консоль сообщает об ошибке: ": 8080 / public / Floor-Is-Lava.jpg: 1 GET http://localhost: 8080 / public / Floor-Is -Lava.jpg 404 (не найдено) "

Код на этой странице: 

import img from '../../../public/floor-is-lava.jpg'

<Card bg="light" text="secondary" style={{ width: '350px', height: '300px' }}>
   <img className="project-img" src={img} />
   <Card.ImgOverlay>
      <Card.Text>Go to github</Card.Text>
   </Card.ImgOverlay>
</Card>

Ошибка указывает на этот фрагмент кода на моем сервере / index. js: 

 // any remaining requests with an extension (.js, .css, etc.) send 404
  app.use((req, res, next) => {
    if (path.extname(req.path).length) {
      const err = new Error('Not found')
      err.status = 404
      next(err)
    } else {
      next()
    }
  })

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

Любая помощь будет принята с благодарностью!

1 Ответ

0 голосов
/ 09 июля 2020

Вы получаете эту ошибку, потому что вы ссылаетесь на publi c каталог изображений.
Скопируйте свое изображение в каталог sr c и импортируйте его. тогда это может сработать. 

import img from '../../floor-is-lava.jpg'

<Card bg="light" text="secondary" style={{ width: '350px', height: '300px' }}>
   <img className="project-img" src={img} />
   <Card.ImgOverlay>
      <Card.Text>Go to github</Card.Text>
   </Card.ImgOverlay>
</Card>

Пожалуйста, дайте мне знать, если у вас возникнут проблемы.

...