Como exibir a imagem local na redução


142

Tento o seguinte no markdown, mas parece que não funciona, alguém sabe como exibir uma imagem local no markdown? Não quero configurar um servidor web para isso. obrigado

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

Respostas:


108

Suspeito que o caminho não está correto. Conforme mencionado pelo user7412219, o Ubuntu e o Windows lidam com o caminho de maneira diferente. Tente colocar a imagem na mesma pasta do seu Notebook e use:

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

No Windows, a área de trabalho deve estar em: C: \ Users \ jzhang \ Desktop


5
O que "Título" faz?
niCk cAMel

6
@niCkcAMel "Título" é o que é mostrado se você passar o mouse sobre a imagem. "texto alternativo" é o que é mostrado, em vez disso, se a imagem não puder ser exibida.
chris

2
"Tente colocar a imagem no mesmo arquivo": isso deveria ser arquivo -> pasta ?
patrick

60

O seguinte funciona com um caminho relativo para uma imagem em uma subpasta ao lado do documento (atualmente testado apenas em um sistema Windows):

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

1
IMHO a melhor resposta, funciona com um arquivo de marcação GitHub da maneira desejada.
Erich Kuester

A melhor resposta!
Zahra Taheri

21

A melhor solução é fornecer um caminho relativo à pasta onde o documento MD está localizado.

Provavelmente, um navegador está com problemas ao tentar resolver o caminho absoluto de um arquivo local. Isso pode ser resolvido acessando o arquivo através de um servidor web, mas mesmo nessa situação o caminho da imagem tem que estar correto.

Ter uma pasta no mesmo nível do documento, contendo todas as imagens, é a solução mais limpa e segura. Ele será carregado no GitHub, servidor da Web local, local.

images_folder/img.jpg  < works


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

Usando o caminho absoluto, a imagem estará acessível apenas com um url como este: http: //hostname.doesntmatter/image_folder/img.jpg


1
+1 para "A melhor solução é fornecer um caminho relativo à pasta onde o documento MD está localizado." Ele mostrou as imagens na minha máquina local.
MasterJoe

17

PASSO A PASSO :

  1. Crie um diretório chamado Imagens e coloque todas as imagens que serão renderizadas pelo Markdown.

  2. Por exemplo, coloque example.png em Imagens .

  3. Para carregar example.png que estava localizado no diretório de imagens antes.

![title](Images/example1.png)

Observação : o diretório de imagens deve estar localizado no mesmo diretório do arquivo de texto markdown, que possui.mdextensão.


Qual é o caminho dessa pasta "Imagens"? Você o adicionou a alguma configuração no vscode?
K_dev

1
@K_dev O diretório "images" deve estar localizado no mesmo diretório do seu arquivo de texto markdown, que tem a extensão ".md". Eu não adicionei nenhuma configuração ao vscode.
nevzatseferoglu

14

Para adicionar uma imagem no arquivo markdown, o arquivo .md e a imagem devem estar no mesmo diretório. Como no meu caso, meu arquivo .md estava na pasta doc, então também movi a imagem para a mesma pasta. Depois disso, escreva a seguinte sintaxe no arquivo .md

![alt text](filename)

gostar ![Car Image](car.png)

Isso tem funcionado para mim.


7

Adicionar uma imagem local funcionou para mim da seguinte forma: ![alt text](file://IMG_20181123_115829.jpg)

Sem o file://prefixo não funcionou (Win10, Notepad ++ com MarkdownViewer ++ addon)

Edit: descobri que também funciona com tags html, e isso é muito melhor: <img src="file://IMG_20181123_115829.jpg" alt="alt text" width="200"/>

Edit2: No editor Atom, ele funciona sem o file://prefixo. Que bagunça.


3

Até onde sei, para VSCode no Linux, a imagem local pode ser exibida normalmente apenas quando você coloca a imagem na mesma pasta do seu .mdarquivo de postagem.
ou seja, apenas ![](image.jpg)ou ![](./image.jpg)funcionará.
Mesmo o caminho absoluto como ![](/home/bala/image.jpg)também não funciona.


3

Editado:

Trabalhando para mim (para imagem local)

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

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

O arquivo markdown README.md está no mesmo nível do diretório doc.

No seu caso, o arquivo markdown deve estar no mesmo nível dos arquivos do diretório.

Trabalhando para mim (url absoluto com caminho bruto)

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

NÃO está funcionando para mim (url com caminho de blob)

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

Acho que seu url não é válido: falta uma barra depois de https. Um pouco tarde, talvez. :)
Financiador

Obrigado @Funder, corrijo o url, deu um erro de digitação. 😉
Lingjing França

2

Outra possibilidade para a imagem local não exibida é o recuo não intencional da referência da imagem - espaços anteriores ![alt text](file).

Isso o torna 'bloco de código' em vez de 'inclusão de imagem'. Apenas remova os espaços principais.


1

Tive problemas ao inserir imagens no R Markdown. Se eu fizer o URL inteiro: C:/Users/Me/Desktop/Project/images/image.pngele tende a funcionar. Caso contrário, tenho que colocar o markdown no mesmo diretório da imagem ou em um diretório ancestral para ela. Parece que o diretório de tricô declarado é ignorado ao fazer referência a imagens.


Isso não fornece uma resposta para a pergunta. Você pode pesquisar perguntas semelhantes ou consultar as perguntas relacionadas e vinculadas no lado direito da página para encontrar uma resposta. Se você tiver uma pergunta relacionada, mas diferente, faça uma nova pergunta e inclua um link para esta para ajudar a fornecer contexto. Veja: Faça perguntas, obtenha respostas, sem distrações
Shanteshwar Inde

1

Dependendo da sua ferramenta - você também pode injetar HTML na marcação.

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

Isso pressupõe que sua estrutura de pastas é:

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

0

Coloque a imagem na mesma pasta do arquivo markdown ou use um caminho relativo para a imagem.


0

apenas copie a imagem e cole-a, você obterá o resultado

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

0

No Jupyter Notebook Markdown , você pode usar

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

fez uma edição rápida (e correção de erros de digitação) para ajudar na legibilidade, deve ser o link correto, mas vale a pena verificar no caso :)
Daniel Brose

1
Pro: personalização de HTML adicionada usando <img >tag
Sumanth Lazarus

-2

Não há necessidade de configurar um servidor web

Tentei enviar minha imagem local na seção de comentários da essência e simplesmente copiei e colei a URL gerada. Funcionou para mim 😊

insira a descrição da imagem aqui


-3

Eu tenho uma solução:

a) Exemplo de Internet:

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

b) Exemplo de imagem local:

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

TurboByte

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.