添加 django MarkdownX 图像的完整路径？答案

【问题标题】：Adding full path to django MarkdownX images?添加 django MarkdownX 图像的完整路径？
【发布时间】：2020-05-07 13:08:09
【问题描述】：

我在我的 django 模型中添加了一个 MarkdownxField，它运行良好。我可以从管理面板通过适当的预览对其进行编辑。

但是，当我将图像添加到降价时，出现了问题。我的应用程序是在 React 中构建的，并从域上的不同端口提供服务。当 MarkdownX 将图像添加到 Markdown 文件时，它会使用相对路径进行操作，因此调用会转到客户端端口，而不是自动保存图像的服务器端口。

我查看了 MarkdownX 的设置选项，但找不到有用的东西。图像被上传一个保存的井。但是客户端却拿不到。

【问题讨论】：

标签： django reactjs django-models django-packages

【解决方案1】：

可能的解决方案（也可能是困难的解决方案）是，提供图像的绝对路径

例如：

![MyImage](<b>https://my.domain.com</b>/mediafiles/markdownx/e4692afa-9608-4fac-bd85-c28209879d0b.png)

【讨论】：

是的，我想到了，但这将是用户，虽然在这种情况下他精通技术，但这样做仍然很烦人。也许我可以以某种方式过滤它，即使在查看降价内容时做出反应和搜索并注入域。

【解决方案2】：

所以这并不是我在问题中想要的，但我在客户端解决了这个问题，方法是在解析 markdownx 内容时注入完整路径。

以防万一有人被卡住，这就是我所做的：

// This util function acts as a middleware when i collect the data.
import { serverPath } from "../serverPaths";

const markdownImageInjector = (data: string): string => {
  let injected = data.replace(
    /!\[\]\(\/media\/markdownx\//g,
    `![](${serverPath}media/markdownx/`
  );
  return injected;
};

export default markdownImageInjector;

下面是动作：

const getArticle = (id: string) =>
  axios
    .get(`${apiPath}/articles/${id}`)
    .then(res => {
      let data = res.data;
      data.content = markdownImageInjector(data.content);
      return data;
    })

【讨论】：

解决了我完全相同的问题。我有前端：3000 但后端：8000 谢谢！
@Hvitis 很高兴它有帮助！