Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reference image in a markdown file #595

Closed
sxywu opened this issue Sep 6, 2016 · 12 comments
Closed

Reference image in a markdown file #595

sxywu opened this issue Sep 6, 2016 · 12 comments

Comments

@sxywu
Copy link

sxywu commented Sep 6, 2016

Hi, I have a relatively simple set of visualizations that I want to provide annotations for (some images and text), and since I have quite a few sets of annotations I was thinking of doing them in separate Markdown files and importing them into React.

Then I realized:

  • I don't know how to reference images in a Markdown file with CRA, since the only way is to import an image but I can't do that with Markdown (can I?)
  • I can't seem to import a Markdown file (or text file)

I read in #28 that we could potentially just deploy the static files to a CDN in production, but that seems like overkill for such a simple project.

Am I thinking about this in the correct way?

@gaearon
Copy link
Contributor

gaearon commented Sep 6, 2016

Thanks for filing an issue! Did you previously work with a system that lets you import markdown from code? Was it some of the Webpack loaders?

@sxywu
Copy link
Author

sxywu commented Sep 6, 2016

Nope! I just thought maybe it'd be possible (the only experience I have with Markdown is writing the README files). If it's not possible to import Markdown, I am also alright with being able to import a text file and using Remarkable.

I am currently reading this: https://webpack.github.io/docs/webpack-dev-server.html and looking into webpack.config.dev.js & webpack.config.prod.js - is this what you mentioned in #28 about also copying specific directories or serving from a different port? The confusing I have about serving from a different port is how to do it when I deploy to Github Pages.

Thank you Dan (:

@gaearon
Copy link
Contributor

gaearon commented Sep 7, 2016

I think for now your best bet is just to embed markdown into JS files as string literals. You can use interpolation (ES6 template strings) to inject image URLs in them which you can obtain by importing images. You can even create files that export solely string literals and name them .md.js to make their role clear. Does this solve your use case?

@gaearon
Copy link
Contributor

gaearon commented Sep 7, 2016

import myImageUrl from './image.png';

export default `
# Hello from markdown

![some image](${myImageUrl})
`.trim();

@sxywu
Copy link
Author

sxywu commented Sep 7, 2016

Brilliant! It's much simpler and more straightforward than what I was thinking of doing - I will try it and let you know, thank you!

@gaearon
Copy link
Contributor

gaearon commented Sep 7, 2016

Yea. The reason I don't want to enable importing md files directly is because different people might have different opinions about how to process them. Some will expect the output to be the original string, others will want to pre-compile it to HTML or even an intermediate object representation.

@sxywu
Copy link
Author

sxywu commented Sep 7, 2016

It worked brilliantly, thank you! Closing this issue (:

@sxywu sxywu closed this as completed Sep 7, 2016
@pjm17971
Copy link

@gaearon: Is there any alternative to this? i.e. a way to load a markdown file? I have dozens of them, and they are filled with back ticks which would all need to be escaped. (just now advancing react-scripts to latest version from something like 0.2 (yes, early adopter, and it "just worked").

@msikma
Copy link

msikma commented Aug 16, 2017

There's no longer a way to directly import Markdown files. In case anyone finds their way here through Google, you could always use fetch() to accomplish this asynchronously:

// return the URL, e.g. /static/media/changelog.1fb9caf0.md
import myMarkdownFile from '../../../changelog.md';

fetch(myMarkdownFile)
  .then(response => response.text())
  .then(text => {
    // logs a string of Markdown content
    console.log(text);
  });

@gaearon
Copy link
Contributor

gaearon commented Aug 16, 2017

Check out #2961 for a discussion.

@pjm17971
Copy link

@gaearon thanks for adding the above issue for discussion. Some solution along those lines would be very helpful.

@msikma yeah, that's what I ended up doing too. Not ideal, but it works well enough for now.

@gaearon
Copy link
Contributor

gaearon commented Jan 9, 2018

Related: #3722.

@lock lock bot locked and limited conversation to collaborators Jan 20, 2019
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
None yet
Development

No branches or pull requests

4 participants