Проблема с загрузкой img и свойством границы в приложении react с css

#html #css #reactjs

Вопрос:

У меня есть небольшой проект react, и я сталкиваюсь с проблемами с базовым CSS! Я поделился файлами для справки, чтобы любой мог попробовать свои машины для получения отзывов/ответов. Ссылка на Github

Проблема 1: изображение не загружается. Я перепробовал все, что упоминалось в Интернете, например, проверил путь к файлу и написание файла. кажется, все в порядке. поскольку это будет выполняться через сервер, я видел ссылку, которая будет https://localhost:3000/src/assets/img/images.jfif

Я пробовал src, чтобы быть

 src="./src/assets/img/images.jfif" 
src="src/assets/img/images.jfif" 
src="../../../src/assets/img/images.jfif" 
src="../../assets/img/images.jfif" 
src="File://I:/samples/Portfolio/portfolio2/src/assets/img/images.jfif"
 

кажется, ничего не работает.

  1. Странное поведение при удалении пограничного свойства! Что-то странное происходит, когда я удаляю свойство border из .portfolio__вступление 🙂 граница: 2 пикселя сплошного черного цвета; высота вступления, кажется, так сильно уменьшается, что я не смог понять, почему это происходит!

Я пробовал в браузерах Google Chrome и Firefox.

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

Ответ №1:

Попробуйте поместить изображения в свою общую папку, вам просто нужно будет позвонить им src="./toto.png . Или, если вы хотите продолжать использовать их из папки «Ресурсы», вам придется импортировать их.

 import Toto from "././src/assets/img/images.jfif"


export const test = () => {
    return (
        <div>
            <img src={Toto} alt="toto" />
        </div>
    )
}
 

Комментарии:

1. Большое спасибо @hissroth. Часть изображения работает нормально. есть идеи, почему возникает вторая проблема. Я использовал свойство границы для целей тестирования. Если я удалю это, он будет вести себя очень странно. Я понятия не имею, почему это происходит. нужно понять