如何在Nuxt+Strapi项目的markdownit插件中拼接图片链接前缀

嘿，我来帮你搞定这个图片链接前缀的事儿！你现在遇到的问题是Strapi返回的图片路径是相对路径，前端需要完整的Strapi服务地址才能正确加载，下面给你两种实用的解决方案：

方法一：自定义MarkdownIt的图片渲染规则 #

直接在Nuxt的markdownit配置里重写图片的渲染逻辑，给符合条件的链接加上前缀：

// nuxt.config.js
export default {
  // 其他配置...
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true,
    typographer: true,
    // 添加自定义图片渲染器
    renderer: {
      image: function(tokens, idx, options, env, self) {
        const token = tokens[idx];
        // 获取图片的src属性值
        const originalSrc = token.attrGet('src');
        
        // 只处理Strapi上传的图片（路径以/uploads/开头）
        if (originalSrc && originalSrc.startsWith('/uploads/')) {
          // 给路径加上Strapi服务的前缀
          token.attrSet('src', `http://localhost:1337${originalSrc}`);
        }
        
        // 调用默认的渲染逻辑生成最终的img标签
        return self.renderToken(tokens, idx, options);
      }
    }
  }
}

这个方法的好处是精准控制，只给Strapi上传的图片加前缀，不会影响其他外部图片链接。

方法二：结合环境变量配置（更灵活） #

如果以后要切换生产环境的Strapi地址，硬编码localhost会很麻烦，建议把前缀放到环境变量里：

1. 首先在项目根目录创建.env文件：

STRAPI_BASE_URL=http://localhost:1337

2. 然后修改nuxt.config.js里的markdownit配置：

// nuxt.config.js
export default {
  // 其他配置...
  markdownit: {
    preset: 'default',
    linkify: true,
    breaks: true,
    injected: true,
    typographer: true,
    renderer: {
      image: function(tokens, idx, options, env, self) {
        const token = tokens[idx];
        const originalSrc = token.attrGet('src');
        
        if (originalSrc && originalSrc.startsWith('/uploads/')) {
          // 从环境变量获取前缀，默认值兼容本地开发
          const strapiBase = process.env.STRAPI_BASE_URL || 'http://localhost:1337';
          token.attrSet('src', `${strapiBase}${originalSrc}`);
        }
        
        return self.renderToken(tokens, idx, options);
      }
    }
  }
}

这样以后部署生产环境时，只需要修改.env里的STRAPI_BASE_URL为你的线上Strapi地址就行，不用动代码。

额外提醒 #

记得确保Strapi的/uploads目录已经开启了公开访问权限，不然前端还是加载不了图片哦～

内容的提问来源于stack exchange，提问作者Mireli Hesenov