Docz: How to add images to .mdx files

[elihorne]

Question

How do you easily add images to .mdx files?

Description
I'm trying to find a way to add an image to /public/ and then display it via markdown in the .mdx file.

1 - By looking at the docz-site, I've figured out that react components can include and reference images, which will then make them available after building, but we have many use cases where the image usage doesn't justify creating a component just to display it.

2 - I've found references to remark-images which turns image paths into rendered images, but those paths don't cause Docz to make the images available after building.

Please advise. I'd love to be able to add and reference an image by putting it in /public/ and then using a predictable path in the markdown.

[gizmodesbois]

If you use an <img /> tag, does it fulfill your need?

Here is how I would handle it:

setAliases.js

const path = require('path');

module.exports = (config) => {
    const newalias = {
        '@public': path.join(__dirname, '/public'),
    };

    config.resolve.alias = { ...config.resolve.alias, ...newalias };
    return config;
};

doczrc.js

...
import setAliases from './config/setAliases';

export default {
    ...
    modifyBundlerConfig: config => setAliases(config),
};

introduction.mdx

---
name: Introduction
route: /
---

import imageUrl from '@public/images/image.png';

# Introduction

Lorem ipsum

<img src={imageUrl} alt="Image alt" />

You avoid creating a new components each time you add an image and you can add a bit of style if you need on it.

[andrevenancio]

This solution seem clean enough, but I have a problem importing it. It says to

This dependency was not found:

* @public/images/test.png in ./src/app/cms-components/detail-hero.mdx

my folder structure is:

docz-alias.js
doczrc.js
src/
    /static
        /images
            /docz
                test.png

const path = require('path');

module.exports = (config) => {
    const newalias = {
        '@public': path.join(__dirname, 'src/static/images/docz'),
    };

    config.resolve.alias = { ...config.resolve.alias, ...newalias };

    console.log(config.resolve.alias);
    return config;
};

import { css } from 'docz-plugin-css';
import path from 'path';
import { PATH_SOURCE } from './scripts/webpack/webpack.config';
import setAliases from './docz-aliases';

export default {
    dest: '/documentation',
    themeConfig: {
        mode: 'light',
    },
    modifyBundlerConfig: config => setAliases(config),
    plugins: [
        css({
            preprocessor: 'sass',
            loaderOpts: {
                includePaths: [path.resolve(PATH_SOURCE)],
            },
        }),
    ],
};

Is this an old solutions?

[gizmodesbois]

Hello @andrevenancio,
Your alias is pointing to src/static/images/docz.

Can you try @public/test.png directly?
In my example, I'm not pointing to the images directory directly.

[pedronauck]

Since the newest version you can define your own public folder and get into it by accessing path from /public:

// doczrc.js
export default {
  public: '/public-folder'
}

# Hello world

![](/public/some/image.png)

[rbuas]

Is it possible to access the static resources into /public folder without '/public' in the access path ? For example:

// doczrc.js
export default {
  public: '/public-folder'
}

# Hello world

![](/some/image.png)



md5-c78c61a399aaf2581ade1cda7ad9f7c0



  // ...
   before(app: any, server: any): void {
      app.use(evalSourceMapMiddleware(server))
      app.use(errorOverlayMiddleware())
      app.use('/public', express.static(publicDir))
      hooks.onPreCreateApp<any>(app)
    },
    // ...



md5-d14feb9e6a93eef2d4395ce0ecc86423



  // ...
   before(app: any, server: any): void {
      app.use(evalSourceMapMiddleware(server))
      app.use(errorOverlayMiddleware())
      app.use('/', express.static(publicDir))
      hooks.onPreCreateApp<any>(app)
    },
    // ...

What do you think about it @pedronauck ? Could it work without side effects ?

[ghost]

My folder structure-

project/
  component/
    images/
      some.png
    component.mdx

In mdx file using image

![](images/some.png)
![](./images/some.png)
![](component/images/some.png)

I am not able to show this image in mdx file

[fatihyildizhan]

I am also not able to show images from public/static folder.