无法在 MVC 项目中使用 ajax 预览图像

Question

我正在制作一个博客网站，我可以使用 tinymce 的富文本编辑器将图像上传到它，但图像的预览不会显示在 textarea 中。（尽管如果我还是上传了图片，我可以在 blogfeed 中完美地看到它）。

我怀疑我如何在 MVC 框架中实现 tinymce 存在问题（布拉德·特拉弗西在 udemy 上的框架）。因为当我查看图像的文件路径时，它们是不同的。

"<img src="http//localhost/mywebsite/content/images/image.jpg>". （图片来自博客源）

"<img src="http//localhost/mywebsite/posts/content/images/image.jpg". （图片来自 tinymce 编辑器）

由于某种原因，当图像加载到 tinymce 编辑器中时，控制器被包含在内。我试着弄乱应该保存图像的位置，如果我将它设置为，$imageFolder = "images/";那么我可以在 blogfeed 中看到图像，但不能在预览中看到。如果我设置$imageFolder = "../images/";，则可以在预览中看到图像，但在 blogfeed 中看不到。

我还尝试定义一个常量路径，“定义（“IMGROOT”，/path/to/my/site）”然后设置$imageFolder = IMGROOT . 'content/images";，但后来我收到错误“不允许加载本地资源”，我不太热衷于规避因为这可能是我的博客发布后不加载本地资源的一个很好的理由。

上传.php：

<?php

    //upload images

      header('Content-Type: application/json');

      /***************************************************

        * Only these origins are allowed to upload images *

        ***************************************************/

       $accepted_origins = array("http://localhost", "http://192.168.1.1", "http://example.com");

       /*********************************************

        * Change this line to set the upload folder *

        *********************************************/

         $imageFolder = "images/";

         $temp = current($_FILES);

         // Accept upload if there was no origin, or if it is an accepted origin

         $filetowrite = $imageFolder . $temp['name'];

         move_uploaded_file($temp['tmp_name'], $filetowrite);

         // Respond to the successful upload with JSON.

         // Use a location key to specify the path to the saved image resource.

         // { location : '/your/uploaded/image/file'}

         echo json_encode(array('location' => $filetowrite));

Answer 1

我通过向 tinymce init 添加 base_url 来修复它。这样它会忽略我从 MVC 教程中获得的路由，只加载指定文件夹中的任何图片。我还添加了 3 行，我还不完全确定他们做了什么，但他们对文件的路径做了一些事情。请注意，我在 config.php 文件夹中定义了常量，因此“URLROOT”被定义为“http:localhost/mywebsite”。&nbsp; tinymce.init({&nbsp; &nbsp; selector: '#tinymcebody',&nbsp; &nbsp; plugins: "image",&nbsp; &nbsp; document_base_url : "<?php echo URLROOT; ?>",&nbsp; &nbsp; relative_urls : false,&nbsp; &nbsp; remove_script_host : false,&nbsp; &nbsp; convert_urls : false,&nbsp; &nbsp; images_upload_url: '<?php echo URLROOT;?>/upload.php',&nbsp; &nbsp; images_upload_handler: function (blobInfo, success, failure) {&nbsp; &nbsp; var xhr;&nbsp; &nbsp; var formData;