Docusaurus: markdown image reference can not find file in docs/assets -> 404

Created on 24 Apr 2018  路  10Comments  路  Source: facebook/docusaurus

Is this a bug report?

yes

Have you read the Contributing Guidelines on issues?

yes

Environment

(OS, Node, npm, yarn)
Windows 10
Node v8.11.1
npm 5.6.0
yarn 1.6.0

Steps to Reproduce

(Write your steps here:)
I ran into the problem a bit further down my own project; but initiated a new docusaurus project from the start to see if the problem still exists. And I get the same error...no changes were made to siteConfig.js

  1. npm install --global docusaurus-init
  2. docusaurus-init
  3. rename examples -> /docs and /blog as in installation manual
  4. add folder /assets to /docs
  5. add a dummy dosomething.png (also .jpg) file to assets folder
  6. add ![test](assets/dosomething.png) to doc1.md
  7. npm start
  8. console error: GET http://localhost:3000/docs/assets/dosomething.png 404 (Not Found)

tried it in Chrome and Brave browser; same result.

Expected Behavior

Expected: image is shown in browser

Actual Behavior

console error: GET http://localhost:3000/docs/assets/dosomething.png 404 (Not Found)

Reproducible Demo

https://github.com/iam-io/documentation/blob/master/docs/DOC_2_shoppable.md

Here you can see that github understand the link and shows the picture...however my npm build doesn't work.

bug claimed platform-inconsistency

All 10 comments

Hi @alex254. Interesting, I assume you are using the latest version of Docusaurus (1.0.14 - which you can check by doing npm outdated docusaurus from the website directory).

I just tried this on OS X, and it worked fine.

So I am now led to believe that this may be a Windows support problem on our part.

What happens if you put the image in website/static/img and reference the image in markdown like

![test](/img/dosomething.png)

Or if you have a way to try your test on a Mac or Linux machine, that could be another way to verify as well.

Hi JoelMarcey,

Thanks for the super fast response :)

It works when I put the files in website/static/img and reference them like you proposed :)

ehm, I get an empty response if I run the version check...npm update docusaurus also gives an empty response...I guess it's up to date

I don't have a Mac or running Linux sorry..

I have tried:

assets/dosomething.png
/assets/dosomething.png
docs/assets/dosomething.png
/docs/assets/dosomething.png

none of them work, so I am starting to think it genuinely is a bug; also considering it that does work when I put them website/static/img folder

@alex254 It is probably a bug with how we handle paths specifically for Windows, although I thought we fixed a bunch of that. I need to get my hands on a Windows machine to test. But that is my current working theory.

@JoelMarcey Ok, I'm going to continue with my project; thanks for the help! If you want to get the reproducable demo please use this commit: https://github.com/iam-io/documentation/commit/10d5f232d0889f20e658e01202b8b54fa6af49ec

Same issue on our project. @JoelMarcey will you still look at this ?

This is related to Windows.

Tried on Linux
linux

Tried on Windows
windows

@Themandunord @alex254 appreciate it if you could test out #720 and see if it's working for you

@endiliey I can confirm that the issue is fixed when I reproduce your commit in my local environnent 馃槂

Was this page helpful?
0 / 5 - 0 ratings

Related issues

KoenCa picture KoenCa  路  25Comments

bhaskarhc picture bhaskarhc  路  23Comments

t3573393 picture t3573393  路  25Comments

yangshun picture yangshun  路  70Comments

slorber picture slorber  路  23Comments