我现在用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
}}
我现在用markdown写文档,图片的引用都是用相对路径,放在一个assets文件夹里面. 所以,图片的路径也就是...
处理静态资源 js的打包基本处理完了，还有图片、音频等静态资源需要处理。 依然先装依赖： 增加webpack配置：...
设置静态资源前缀 文档打包命令中指定环境REACT_APP_ENV next.config.js文件 图片文件前缀...
rails中assets主要用来处理静态资源，包括了css、js压缩和编译，静态资源图片的管理，按需加载资源。 默...
静态资源 在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。 Spring Boot的默认位...
静态资源访问在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。需要JAVASpring Cl...
静态资源访问 在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。 默认配置 Spring B...
静态资源访问在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。 默认配置Spring Boo...
静态资源访问 在我们开发Web应用的时候，需要引用大量的js、css、图片等静态资源。 默认配置 Spring B...
在web开发中，静态资源的访问是必不可少的，如：图片、js、css 等资源的访问。 spring Boot 对静态...
本文标题：next js 处理图片等静态资源(markdown图片相对路径
本文链接：https://www.haomeiwen.com/subject/yxgxbltx.html
网友评论