Как посмотреть путь к картинке
Перейти к содержимому

Как посмотреть путь к картинке

  • автор:

Как прописать путь к изображению в >?

Имеется изображение, и необходимо прописать путь к нему, в src . Сам путь передается в компонент через props .

Во-первых, — если передавать так путь, то изображение не появляется, поэтому использую: > — если знаете вариант лучше, то буду рад его узнать.

Во-вторых, при передачи в require путь из props ( > ), то появляется ошибка Error: Cannot find module «.» .
this.props.card — 100% является строкой.
Как быть, как правильно передать путь в src ?

Как указать в img путь картинки?

У меня локальный сайт. Есть страница статьи я в статье среди текста хочу вставить изображение которое находится не в папке проекта а например в папке загрузки или если оно в любой другой папке на компе.
Я сделал так

— Но фото на сайте не отображается. Почему так? как будет правильно?

  • Вопрос задан более трёх лет назад
  • 19423 просмотра

Комментировать
Решения вопроса 1

Avarskiy

протокол file:/// поставь спереди

file:///C:\РАБОЧИЙ СТОЛ\Все папки\фото\Обои рабочий стол\1.jpg

Ответ написан более трёх лет назад
Vakha1 @Vakha1 Автор вопроса
Так тоже не отображается.

Avarskiy

Vakha1, значит путь к файлу неправильный. Скопируйте из проводника.

Avarskiy

Vakha1, в свойствах файла бывает полный путь к файлу.

Avarskiy

Vakha1, только смотрите. Если у вас сайт на локальном хосте, у вас не будет такого доступа к файлам. А если просто .html файл открыли в браузере, то можно.

Vakha1 @Vakha1 Автор вопроса

Да у меня сайт на локальном хостинге. Это значить так указывать пути не как не получится?
Еще вопрос. Вот мне на сайте в статью нужно добавить фото это значить это фото сперва нужно будет загрузить на сервер и потом к нему указывать путь да?

Nikita-Fast

Nikita-Fast @Nikita-Fast

Vakha1, для начала надо путь указать не от диска а от папки на сервере , к примеру мы имеем локальный хост с таким каталогом :
5bc7317d1b12a059359019.png
то ваши изображения должны быть не в file:/// а в папке img на локальном хосте и путь будет такой

Avarskiy

Vakha1, да. Файлы должны быть в опубликованной папке. Иначе это была большая дыра. Ты ко мне на сайт заходишь, а я у тебя на сервере копаюсь. По этому это не получится.

Как правильно указать путь до картинки?

Подскажите, пожалуйста, перебрасываю обычную верстку на реакт ( учусь, делаю первый раз ).
Нужно поставить пути для картинок и видео
Через ‘../../assets/img/img.png’ это не работает, как мне сделать это проще?
Помню в каком-то видео видел как человек через константу это делал какую-то, но видео к сожалению найти не смог.
Можно как-то сделать чтобы это было через какую-то константу?
Проект сделал через create-react-app

  • Вопрос задан более года назад
  • 469 просмотров

Комментировать
Решения вопроса 0
Ответы на вопрос 1

Kentavr16

long cold winter

импортируй картинку в самом начале страницы так:

import image from «./путь к картинке»

Ответ написан более года назад
Дмитрий Руденко @M1sty1 Автор вопроса

У меня компонент находится по такому пути
components>component
А картинка
assets/img/logo
Мне чтобы дойти до картинки нужно сделать так:
../../assets/img/logo
Но он пишет что такая картинка не найдена

Kentavr16

проверяй путь к файлу, название/расширение. Импорт работает, это обычная практика в реакте
Дмитрий Руденко @M1sty1 Автор вопроса
Kentavr16, Вы реально думаете что я пути элементарное указать не могу?
Дмитрий Руденко @M1sty1 Автор вопроса

Module not found: Error: You attempted to import ../../../public/header/logo.svg which falls outside of the project src/ directory. Relative imports outside of src/ are not supported.
You can either move it inside src/, or add a symlink to it from project’s node_modules/.

Вот такая ошибка

Kentavr16

черным по белому — помести директорию с ресурсами в папку src. иначе импорт не работает.

Kentavr16

в родную src папку реакта, конечно
Дмитрий Руденко @M1sty1 Автор вопроса

Kentavr16, У меня assets в папке src и лежит.
Я от компонента Header спускаюсь вниз, захожу в ассетс и беру оттуда картинку, но он почему-то думает что я ухожу куда-то дальше

Kentavr16

Дмитрий Руденко, а реакт говорит что импортируешь из папки public/header. а не src/header к примеру
Дмитрий Руденко @M1sty1 Автор вопроса

Kentavr16, Не знаю в чем проблема была, сейчас все работает
На крайний случай еще помог такой метод:
require(‘path’).default

Установил путь к рисунку как /images/pic.gif, но рисунок не отображается на веб-странице. Почему?

Слэш (символ /) перед именем файла или папки обозначает, что отсчет ведется от корня сайта. Соответственно, путь /images/pic.gif следует понимать так. В корне сайта находится папка с именем images, а в ней располагается файл pic.gif. Данный способ записи работает под управлением веб-сервера, поэтому на локальном компьютере браузер интерпретирует путь как c:/images/pic.gif , а такой папки и файла, вероятнее всего, нет (пример 1).

Пример 1. Путь к файлу относительно корня сайта

HTML5 IE Cr Op Sa Fx

    Путь к файлу   

Если документ делается исключительно для локального использования, то пути к изображениям следует указывать относительно текущей веб-страницы. Для документов с последующей публикацией на веб-сервере пути относительно корня очень удобны. Они имеют компактную форму, а при переносе файла из одной папки в другую продолжают действовать.

HTML по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

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

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *