next js 处理图片等静态资源(markdown图片相对路径

我现在用markdown写文档,图片的引用都是用相对路径,放在一个assets文件夹里面.

所以,图片的路径也就是 assets/pic.png这样子.

其实next.js给你准备了一个静态资源的方案.

那就是在public目录的内容可以通过路径索引到,并且是被当作根目录,

所以,你把图片都放在public的assets目录下,然后用/assets/pic.png就能索引到你的图片了.

也就是说你需要在图片链接上操作一下,都换成前面加一个斜杠就可以了.

另外我用了一个react-markdown的组件,这个组件提供给你了替换图片链接的属性.可以返回一个函数进行处理.

// 转换图片链接到根目录
          transformImageUri={(src, alt, title) => {
            if (src.startsWith('assets')) {
              return '/' + src
            }
            return src
          }}