Как отобразить локальное изображение в уценке


143

Я пробую следующее в уценке, но, похоже, не работает, кто-нибудь знает, как отобразить локальное изображение в уценке? Я не хочу настраивать для этого веб-сервер. Спасибо

![image](files/Users/jzhang/Desktop/Isolated.png)

Ответы:


108

Я подозреваю, что путь неправильный. Как упоминалось пользователем7412219, ubuntu и Windows обрабатывают путь по-разному. Попробуйте поместить изображение в ту же папку, что и ваш блокнот, и используйте:

![alt text](Isolated.png "Title")

В Windows рабочий стол должен находиться по адресу: C: \ Users \ jzhang \ Desktop


6
Что делает "Название"?
Nik CAMel

6
@niCkcAMel "Заголовок" - это то, что отображается, если вы наводите указатель мыши на изображение. Вместо этого отображается замещающий текст, если изображение не может быть отображено.
Крис

2
"Попробуйте поместить изображение в тот же файл": это должен быть файл -> папка ?
Патрик

60

Следующее работает с относительным путем к изображению в подпапке рядом с документом (в настоящее время проверено только в системе Windows):

![image info](./pictures/image.png)

1
IMHO лучший ответ, работает с файлом разметки GitHub желаемым образом.
Эрих

Лучший ответ!
Захра Тахери,

21

Лучшее решение - указать путь относительно папки, в которой находится MD-документ.

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

Наличие папки на том же уровне документа, содержащей все изображения, является самым чистым и безопасным решением. Он загрузится на GitHub, локальном, локальном веб-сервере.

images_folder/img.jpg  < works


/images_folder/img.jpg  < this will work on webserver's only (please read the note!)

Используя абсолютный путь, изображение будет доступно только с таким URL-адресом: http: //hostname.doesntmatter/image_folder/img.jpg


1
+1 за «Лучшее решение - указать путь относительно папки, в которой находится MD-документ». Он показал изображения на моей локальной машине.
MasterJoe

19

ШАГ ЗА ШАГОМ :

  1. Создайте каталог с именем Images и поместите все изображения, которые будут отображаться с помощью Markdown.

  2. Например, поместите example.png в изображения .

  3. Чтобы загрузить файл example.png, который ранее находился в каталоге изображений .

![title](Images/example1.png)

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


Каков путь к папке "Изображения"? Вы добавляли его в какой-нибудь конфиг в vscode?
K_dev

1
Директория @K_dev «images» должна находиться в той же директории вашего текстового файла разметки, который имеет расширение «.md». Я не добавлял никакой конфигурации в vscode.
Невзацефероглу

14

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

![alt text](filename)

лайк ![Car Image](car.png)

Это сработало для меня.


7

Добавление локального изображения сработало для меня примерно так: ![alt text](file://IMG_20181123_115829.jpg)

Без file://приставки не работало (Win10, Notepad ++ с аддоном MarkdownViewer ++)

Изменить: я обнаружил, что он также работает с тегами html, и это намного лучше: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2: в редакторе Atom он работает только без file://префикса. Какой беспорядок.


3

Насколько мне известно, для VSCode в Linux локальное изображение может нормально отображаться только тогда, когда вы помещаете изображение в ту же папку, что и ваш .mdфайл сообщения.
т.е. только ![](image.jpg)или ![](./image.jpg)будет работать.
Даже абсолютный путь вроде ![](/home/bala/image.jpg)тоже не работает.


3

Отредактировано:

Работаю на меня (для локального имиджа)

![system schema](doc/systemDiagram.jpg)

 tree
 ├── doc
     └── jobsSystemSchema.jpg
 ├── README.md

файл уценки README.md находится на том же уровне, что и каталог doc.

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

Работает для меня (абсолютный URL с необработанным путем)

![system schema](https://server/group/jobs/raw/master/doc/systemDiagram.jpg)

НЕ работает для меня (URL-адрес с путем к blob)

![system schema](https://server/group/jobs/blob/master/doc/systemDiagram.jpg)

Я думаю, что ваш URL недействителен: после https не хватает одной косой черты. Возможно, немного поздно. :)
Funder

Спасибо @Funder, я исправил URL, это был промах. 😉
Lingjing France

2

Еще одна возможность для не отображаемого локального изображения - это непреднамеренный отступ ссылки на изображение - пробелы перед ним ![alt text](file).

Это делает его «блоком кода», а не «включением изображения». Просто удалите ведущие пробелы.


1

У меня возникли проблемы с вставкой изображений в R Markdown. Если я делаю весь URL: C:/Users/Me/Desktop/Project/images/image.pngон работает. В противном случае я должен поместить разметку либо в тот же каталог, что и изображение, либо в каталог-предок для него. Похоже, что объявленный каталог вязания игнорируется при обращении к изображениям.


Это не дает ответа на вопрос. Вы можете искать похожие вопросы или обращаться к связанным и связанным вопросам в правой части страницы, чтобы найти ответ. Если у вас есть связанный, но другой вопрос, задайте новый вопрос и включите ссылку на этот, чтобы лучше понять контекст. См .: Задавайте вопросы, получайте ответы, не отвлекаясь
Shanteshwar Inde

1

В зависимости от вашего инструмента вы также можете вставить HTML в уценку.

<img src="./img/Isolated.png">

Предполагается, что ваша структура папок:

 ├── img
     └── Isolated.jpg
 ├── README.md

0

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


0

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

![image.png](attachment:image.png)

0

В Jupyter Notebook Markdown вы можете использовать

<img src="RelPathofFolder/File" style="width:800px;height:300px;">

быстро отредактировал (и исправил опечатку), чтобы улучшить читаемость, ссылка должна быть правильной, но стоит проверить на всякий случай :)
Даниэль Броз,

1
Pro: добавлена ​​настройка HTML с помощью <img >тега
Sumanth Lazarus

-2

Нет необходимости настраивать веб-сервер

Я попытался загрузить свое локальное изображение в разделе комментариев к сути и просто скопировал и вставил сгенерированный URL. Работал у меня 😊

введите описание изображения здесь


-3

У меня есть решение:

а) Пример Интернета:

![image info e.g. Alt](URL Internet to Images.jpg "Image Description")

б) Пример локального изображения:

![image Info](file:///<Path to your File><image>.jpg "Image Description")
![image Info](file:///C:/Users/<name>/Pictures/<image>.jpg "Image Description")

TurboByte

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.