Vuepress: Images with spaces in name do not render

[sdaitzman]

• [x] I confirm that this is an issue rather than a question.

Bug report

Images with spaces in name are not rendered at all.

Steps to reproduce

1. Name an image with spaces in its name.
2. Reference it in a Markdown file.

Here's the repo at the commit where the issue appears: https://github.com/sdaitzman/sam.daitzman.com/tree/dc79228452fd0bf8cd65f799ed3cf711ee32145a

And here's a commit where the issue has been resolved by removing spaces from the filename: https://github.com/sdaitzman/sam.daitzman.com/commit/f25208bc8fa058ead20784b6d91b4576af9b023b

What is expected?

The image appears.

What is actually happening?

The image does not appear.

Other relevant information

Related issue: https://github.com/markdown-it/markdown-it/issues/428

• Output of npx vuepress info in my VuePress project:

Environment Info:

  System:
    OS: macOS 10.15.2
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 12.14.1 - /usr/local/bin/node
    Yarn: 1.21.1 - /usr/local/bin/yarn
    npm: 6.13.4 - /usr/local/bin/npm
  Browsers:
    Chrome: 78.0.3904.97
    Firefox: 72.0.2
    Safari: 13.0.4
  npmPackages:
    @vuepress/core:  1.2.0 
    @vuepress/theme-default:  1.2.0 
    vuepress: ^1.2.0 => 1.2.0 
  npmGlobalPackages:
    vuepress: Not Found

[billyyyyy3320]

URL with spaces is not valid because that's for setting link title attribute.

[sdaitzman]

That totally makes sense, and I'm aware it violates the Markdown spec. But in terms of allowing user-submitted images (like supporting the blog plugin, for example) it's a pretty big issue.

[billyyyyy3320]

I thought it should work fine with %20, but it turns out I'm wrong. So, right, it's an issue.

[jimarick]

Also interested in this being resolved. I am exporting lots of .md files from a notes app onto vuepress site, and all the spaces in image names are replaced with %20, but none of the images render.