H5W3
当前位置:H5W3 > 其他技术问题 > 正文

【Web前端问题】如何在 vuepress 的 markdown里,使用全局变量的 网络图片URL前缀?

问题情景

把图片插入到 markdown,是这样的格式:

>![Logo](https://www.example.com/Logo.png)

我想把 https://www.example.com/ 设置为全局变量。

>![Logo](【全局变量(URL前缀)】/Logo.png)

(因为这个地址可能改变)


我的尝试

我把前缀记录到了 in .vuepress/config.js :

module.exports = {
    title: 'xxxx',
    themeConfig: {
        url: 'https://www.example.com',
    },
    ......
}

我能在 markdown 里取出Url的值,但无法赋值给图片:

![Logo]( {{$themeConfig.url}}/Logo.png )
 <img :src="{{$themeConfig.url}} + '/Logo.png'">
 <img :src="themeConfig.url + '/Logo.png'">

insert5.png


还望解答

webpack 的 @alias 只能设置本地地址。
我查遍了文档、 issues
请问有解决方法 / 插件么,多谢!!!

附官网相关文档,并没提到网络前缀的静态地址:
https://vuepress.vuejs.org/zh/guide/assets.html#相对路径

回答:

之前本地图片链接加 @alias 都不行。后来问题解决了。需要执行这行代码:

yarn add webpack

现在放弃网络链接图片了。
直接把图片放到本地了。如有其它好方法欢迎提出。

回答:

我目前发现了一个算是勉强能用的解决方案 原理是从 markdown-it 上去解决的
首先需要安装 markdown-it-replace-link
这个插件会替换 所有的文件路径 包括 图片也可以
安装之后在 config.js 中 进行配置
以下例子是将 @cosFilePath 替换成 https://demo.demo

module.exports = {
    markdown: {
        plugins: [
            ["markdown-it-replace-link"]
        ],
        extendMarkdown: md => {
            md.use(require(`"markdown-it-replace-link"`),{
                replaceLink: function(link, env){
                    if(link.toString().startsWith('@cosFilePath')){
                        return ('https://demo.demo' + link)
                    }else{
                        return link.toString()
                    }
                    
                }
            })
        }
    }
}

至于楼主提到的 <img>标签 我这里没试过行不行 但是该repo中写到了 Both images and html links will be processed.
以上

回答:

请问解决了吗,目前遇到一样的问题一直找不到方案

本文地址:H5W3 » 【Web前端问题】如何在 vuepress 的 markdown里,使用全局变量的 网络图片URL前缀?

评论 0

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址