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

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

Вопрос задан 4 года 9 месяцев назад

Изменён 6 дней назад

Просмотрен 3k раза

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

Во-первых,<img src="./path/img.png"> — если передавать так путь, то изображение не появляется, поэтому использую: <img src={require("./path/img.png")}> — если знаете вариант лучше, то буду рад его узнать.

Во-вторых, при передачи в require путь из props (<img src={require(this.props.card)}>), то появляется ошибка Error: Cannot find module ".".
this. props.card

— 100% является строкой.
Как быть, как правильно передать путь в src?

• javascript
• html
• reactjs

3

Вы можете вызывать require не у потомка, а у родителя:

<MyComponent imageSrc={require("./image.jpg")} />

И использовать уже привычный метод:

<img src={this.props.imageSrc} />

1

Забирать путь к файлам можно прямо из «заинтересованного» компонента, а конкретный файл передавать в пропсы.

Родитель:

const Toolbar = () => {
    return (
        <div className='toolBar'>
            <div className='tools'>
                <ToolButton image='undo.png' />
                <ToolButton image='redo.png' />
                <ToolButton image='save.png' />
            </div>
        </div>
    )
}

Потомок:

const ToolButton = ({ image }) => {
    return (
        <div className='tool-button'>
            <img src={require('. ./assets/icons/' + image)} alt='' />
        </div>
    )
}

1

В реакт импортировать нужно изображение

Import img "./path/img.png"

Потом этот img использовать в src

<img src={img}>

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

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

python — Как правильно указать путь к изображению в Django + HTML

Задать вопрос

Вопрос задан 3 года 2 месяца назад

Изменён 3 года 2 месяца назад

Просмотрен 2k раз

Здравствуйте. Нужно указать путь для изображения в HTML при использовании Django.
Вроде бы звучит не сложно, на деле как я ни пытался, ничего не выходит.
Мне нужно указать следующий путь к изображению — "main_page/MCStore logo.png".
Изображение хранится по пути "media/main_page/MCStore logo.png".
В итоге изображение не выводит, хотя путь прописан правильно.
Пробовал ставить "media/main_page/MCStore logo.png", тогда на главной странице сайта всё в порядке, работает, но на других пытается вывести по адресу

"news/media/main_page/MCStore logo.png".
Первое слово в пути (в примере указано news) меняется в зависимости от url адреса страницы сайта.
Вопрос в следующем: как мне указать путь, который не будет изменятся. Вариант с P:/… пробовал, не пашет.
Есть предположение, что дело в settings.py. Вот мои настройки, надеюсь поможет в решении проблемы. settings.py:

STATIC_DIR = os.path. join(BASE_DIR, 'static')
STATICFILES_DIRS = [STATIC_DIR, ]
STATIC_URL = '/static/'
STATIC_ROOT = 'statics'
MEDIA_ROOT = 'media'
MEDIA_URL = '/media/'

Очень надеюсь на вашу помощь. Заранее всем спасибо за активность!

• html
• python
• django
• path
• media

в settings.py

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

18

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

путей к файлам в HTML с примерами

Вернуться к: Учебники по HTML

В этой статье я собираюсь обсудить путей к файлам в HTML с примерами. Пожалуйста, прочитайте нашу предыдущую статью, в которой мы обсуждали JavaScript в HTML с примерами. В конце этой статьи вы узнаете все о путях к файлам HTML с примерами.

Пути к файлам HTML

Расположение файла в папке веб-сайта указывается с помощью пути к файлу HTML. Для веб-браузера пути к файлам идентичны адресам файлов. Используя пути к файлам, мы можем добавить любой внешний ресурс в наш файл HTML, например фотографии, файлы, файлы CSS, файлы JS, видео и т. д.

1. : Указывает, что файл изображения находится в той же папке, что и текущая страница
2. : Указывает, что файл изображения находится в папке с изображениями в корневом каталоге текущего веб-сайта.
3. ./demoimg.jpg”>: Указывает, что файл изображения находится в папке на один уровень выше текущей папки.

Абсолютный путь к файлу в HTML

Предположим, мы включаем изображение на наш веб-сайт, которого нет в нашей системе, но оно находится на чьем-либо веб-сайте. Затем нам нужно добавить ссылку на изображение внутри атрибута src в качестве значения. Этот тип URL известен как абсолютный URL.

< img src="https://www.xyz.com/image" > , Здесь https://www.xyz.com/image — ссылка на нужное изображение.

Пример:

 

<тело>
 
Абсолютный путь
 



 

Когда вы запустите приведенный выше HTML-код, вы получите следующий вывод в браузере.

Относительный путь к файлу в HTML

Если изображение уже есть в нашей системе, нам нужно только ввести путь к изображению в качестве значения внутри атрибута src; этот тип URL известен как относительный URL. Во избежание ошибок рекомендуется использовать относительные URL-адреса.

, Здесь изображение находится на нашем рабочем столе, поэтому мы добавили путь к изображению в атрибут src.

Пример

 

<тело>
 
Относительный путь
 



 

Когда вы запустите приведенный выше HTML-код, вы получите следующий вывод в браузере.

В случае абсолютного URL-адреса, если изображение будет удалено с нашего исходного веб-сайта, мы не сможем отобразить его на экране. Таким образом, в случае абсолютного URL-адреса мы зависим от внешнего источника для отображения изображения на экране, тогда как относительный URL-адрес не зависит от какого-либо внешнего источника для отображения изображения на экране. Это преимущество относительных URL-адресов по сравнению с абсолютными URL-адресами.

В следующей статье я собираюсь обсудить макет в HTML с примерами. Здесь, в этой статье, я пытаюсь объяснить путей к файлам в HTML с примерами, и я надеюсь, вам понравится эта статья о путях к файлам HTML с примерами.

Путь к файлу в HTML | Узнайте, как работает путь к файлу в HTML?

Путь к файлу — это концепция, используемая в HTML для определения пути к файлу в структуре папок соответствующего веб-сайта. Это специально используется для поиска точного местоположения файла в нужной папке, что означает, что он точно работает как ориентир или адрес определенного файла, который будет вызывать веб-браузер. Эта концепция в HTML в основном используется для обнаружения путей к файлам изображений, веб-страниц и файлов, файлов CSS, файлов сценариев, мультимедийных файлов, таких как видео, и т. д. Путь к файлу можно найти с помощью двух атрибутов, называемых src или href. Эти атрибуты помогают нам прикрепить внешний файл или источник к нашему HTML-документу.

Синтаксис

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

Итак, вот синтаксис для включения этих файлов на веб-страницы следующим образом:

Синтаксис:

Используется для вставки изображения на нашу веб-страницу.

Вот список некоторого пути с его описанием:

• : Используется, когда мы собираемся использовать изображение из той же папки, что и текущая страница.
• : Используется для указания того, что данное изображение хранится в папке изображений в той же папке веб-сайта.
• : Это используется для определения соответствующего сохранения в корневой папке изображений, где находится текущая веб-папка.
• : Этот тип сообщает пользователю, что данное изображение хранится ровно на один уровень выше текущей папки сайта.

Эти пути к файлам используются в коде всякий раз, когда необходимо добавить некоторые внешние файлы, такие как веб-страницы, изображения, файлы стилей, файлы сценариев и многое другое.

При определении пути к файлу всегда необходимо указывать точный URL-адрес, правильное имя файла и точное имя изображения с правильным расширением. Если все это правильно включено, включенный файл или изображение будут правильно отображаться на веб-странице.

Приведенный выше синтаксис делится на два типа. Один для абсолютного пути к файлу, который основан на URL-адресе. Другой — для относительного пути к файлу, где мы можем определить адрес файлов и изображений, указав простое имя или путь к папке для доступа к его содержимому.

Мы подробно рассмотрим оба типа пути к файлу в следующем разделе, где будет показано, как он на самом деле будет работать.

Как путь к файлу работает в HTML?

Существует два типа путей к файлам: абсолютный путь к файлу и относительный путь к файлу.

Абсолютный путь к файлу используется всякий раз, когда мы используем полный URL-адрес для определения пути к файлу.

Синтаксис: src=»url»;

Пример: Вот фактический код, определяющий, как код абсолютного пути к файлу будет работать в структуре веб-сайта:

 

<голова>


<тело>


 

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

Синтаксис:

 src="img_folder/img_name" или
src="/img_folder/img_name" или
src=""../img_folder/img_name или 

Здесь мы собираемся включить пример, в котором есть все возможные способы отображения пути к файлу с использованием относительного пути к файлу, как показано ниже:

 

<голова>


<тело>
 
Пример показа файла в той же папке 
 
 jpg" alt="Демонстрационное изображение
«стиль = «ширина: 80 пикселей; высота: 80 пикселей; ">
Пример, показывающий файл, находящийся в папке над его
текущая   папка 

Пример, показывающий файл, доступный в папке, которая находится точно в корневой позиции своей текущей подпапки.



 

Всегда считалось хорошей практикой использовать относительный путь к файлу, а не абсолютный путь к файлу.

Примеры пути к файлу в HTML

Ниже приведены следующие примеры. Код для него следующий:

Код:

 

<голова>


 
Абсолютный путь к файлу
 
 Это пример абсолютного пути к файлу.  В этой концепции мы собираемся использовать конкретный «URL» адрес файла. Поэтому мы можем легко добавить этот файл или изображение на их веб-сайт.
<тело>


 

Вывод:

Пример #2

Код:

 

<голова>


<тело>
 
Относительный путь к файлу
 
В этом примере мы увидим, как относительный путь к файлу будет работать с одним и тем же изображением.
 Итак, мы берем здесь одно изображение, хранящееся в одной конкретной папке веб-сайта, поэтому оно будет отображать одно и то же, используя другой путь
 
Относительный путь к файлу с изображением в той же папке 
 

 
Относительный путь к файлу с изображением в папке над текущей папкой 
 
 png" alt="Демонстрационное изображение "style="ширина:100px; высота:100px;">
 
Относительный путь к файлу с изображением, доступным в папке, которая находится точно в корневом положении своей текущей подпапки
 


 

Вывод:

Пример #3

Код:

  <голова>  <тело>
Относительный путь к файлу
В этом примере мы увидим, как относительный путь к файлу будет работать с изображением, а также с файлами
 Итак, мы добавляем файл HTML, файл CSS и изображение, чтобы увидеть фактический результат
Относительный путь к файлу с изображением в той же папке 
 
Относительный путь к файлу с HTML-файлом в папке 
 
No related posts.