Java 无法在tinyMCE中显示从服务器接收的HTML文件中的图像

Java 无法在tinyMCE中显示从服务器接收的HTML文件中的图像,java,angular,rest,tinymce,Java,Angular,Rest,Tinymce,我正在使用GET服务从后端向前端发送一个Java项目和一个HTML文件。然后在我的tinyMCE编辑器的内容中设置接收到的文件。 文件显示正确,但不显示其中的图像。 我猜它们不会显示,因为tinyMCE不知道它们,我应该在tinyMCE配置中提供一个图像列表。问题是我不知道怎么做 到目前为止,我尝试的是: 前端正在接收以下HTML文件: tinyMCE的当前配置为: this.tinyMceConfig = { branding: false, plugins: ["ad

我正在使用GET服务从后端向前端发送一个Java项目和一个HTML文件。然后在我的tinyMCE编辑器的内容中设置接收到的文件。 文件显示正确,但不显示其中的图像。 我猜它们不会显示,因为tinyMCE不知道它们,我应该在tinyMCE配置中提供一个图像列表。问题是我不知道怎么做

到目前为止,我尝试的是:

前端正在接收以下HTML文件: tinyMCE的当前配置为:

this.tinyMceConfig = {
      branding: false,
      plugins: ["advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern", "toc"],
      height: 550,
      paste_data_images: true,
      image_advtab: true,
      imagetools_toolbar: `
        rotateleft rotateright |
        flipv fliph | 
        editimage imageoptions`,
      importcss_append: !0,
      inline: false,
      menubar: "insert",
      toolbar: `
        insertText insertfile undo redo |
        toc | formateselect |
        bold italic underline strikethrough forecolor backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist outdent indent |
        link image | print preview media"
        removeformat`,
      setup: editor => {
        this.editor = editor;

        editor.on('init', ed => {
          ed.target.setContent(this.data.content);
          console.log('editor initialized');
        });
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.data.content = content;
          this.onEditorContentChange.emit(content);
        });
      }
    };
  }

任何帮助都将不胜感激。

Angular配置文件Angular.json让我们通过assets键声明编译器/打包程序必须在包中包含哪些静态资源

您可以自由选择文件夹或单个文件,可以从相对路径资源或绝对路径/资源访问这些文件夹或文件。 这是捆绑要在模板中使用的资源的正确方法


您可以在上阅读更多信息。

图像必须放在“资源”下。所以正确的src是,例如assets/image_1.png。谢谢,它成功了!从来没有想过尝试这个。我应该发布一个带有解释的答案吗?我从img中阅读了一些与资产相关的东西,默认情况下,这些资产是src,img正在搜索资产文件夹下的图像。如果我错了,请纠正我。嗯,基本上是的,见答案。
editor.component.html
editor.component.css
editor.component.spec.ts
editor.component.ts
image_1.png
image_2.png
this.tinyMceConfig = {
      branding: false,
      plugins: ["advlist autolink lists link image charmap print preview hr anchor pagebreak",
        "searchreplace wordcount visualblocks visualchars code fullscreen",
        "insertdatetime media nonbreaking save table contextmenu directionality",
        "emoticons template paste textcolor colorpicker textpattern", "toc"],
      height: 550,
      paste_data_images: true,
      image_advtab: true,
      imagetools_toolbar: `
        rotateleft rotateright |
        flipv fliph | 
        editimage imageoptions`,
      importcss_append: !0,
      inline: false,
      menubar: "insert",
      toolbar: `
        insertText insertfile undo redo |
        toc | formateselect |
        bold italic underline strikethrough forecolor backcolor |
        alignleft aligncenter alignright alignjustify |
        bullist numlist outdent indent |
        link image | print preview media"
        removeformat`,
      setup: editor => {
        this.editor = editor;

        editor.on('init', ed => {
          ed.target.setContent(this.data.content);
          console.log('editor initialized');
        });
        editor.on('keyup change', () => {
          const content = editor.getContent();
          this.data.content = content;
          this.onEditorContentChange.emit(content);
        });
      }
    };
  }
"build": {
  "options": {
    ...
    "assets": [
      "src/main/webapp/assets",
      ...