我在我的 django 模型中添加了一个 MarkdownxField,它运行良好。我可以通过管理面板中的适当预览对其进行编辑。
但是,当我将图像添加到降价时,出现了问题。我的应用程序是在 React 中构建的,并从域上的不同端口提供服务。当 MarkdownX 将图像添加到 markdown 文件时,它会使用相对路径,因此调用会转到客户端端口,而不是自动保存图像的服务器端口。
我查看了 MarkdownX 的设置选项,但找不到有用的东西。图像被上传一个保存的井。但是客户端无法访问它。
我在我的 django 模型中添加了一个 MarkdownxField,它运行良好。我可以通过管理面板中的适当预览对其进行编辑。
但是,当我将图像添加到降价时,出现了问题。我的应用程序是在 React 中构建的,并从域上的不同端口提供服务。当 MarkdownX 将图像添加到 markdown 文件时,它会使用相对路径,因此调用会转到客户端端口,而不是自动保存图像的服务器端口。
我查看了 MarkdownX 的设置选项,但找不到有用的东西。图像被上传一个保存的井。但是客户端无法访问它。
所以这并不是我在问题中想要的,但我在客户端解决了这个问题,方法是在解析 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,
`;
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;
})
可能的解决方案(也可能是困难的解决方案)是,提供图像
Ex的绝对路径:
