从 Vue 访问 CakePHP webroot 目录：图像加载

Posted 2023-03-10

【中文标题】从 Vue 访问 CakePHP webroot 目录：图像加载

【英文标题】：Access CakePHP webroot directory from Vue : Image Load

【发布时间】：2020-12-01 12:31:27

【问题描述】：

我有一个带有 Vue.js 前端和 Cakephp 3.8 后端设置的应用程序。我可以从 Vue 前端上传图像，现在想从我的前端访问这些资产。我的 FrontEnd 在 BackEnd 之外的另一个端口上运行，目前都在本地。

在我的前端访问静态资产没有问题，将动态资产上传到我的后端也没有问题。我只是发现很难从我的前端访问它们。我的后端网址是“http://wampprojects/holidays_backend/”。问题是“如何设置 img src 属性以从后端加载资产？”。

我是否必须通过 API 调用来加载它，或者如果我知道 url 和路径，我可以只设置 src 吗？问题是我不知道确切的路径..

我在代码中尝试了几件事，但在这里看不到它们的相关性。我正在尝试从 CakePHP 后端在 Vue 中设置一个 img url。

<img id="profilepic" src="@/assets/wmtrain_mobile-min.jpg" @click="showMenu">

我可以通过我的控制器访问路径并在浏览器中查看它，但我无法设置图像src..

$wwwroot = Configure::read('App.wwwRoot');
$imageurl = Configure::read('App.imageBaseUrl');
$fullurl = $wwwroot.$imageurl;

我收到错误“不允许加载本地资源”..

有了这个网址，我可以通过浏览器访问图像。为什么我不能从 img html 元素访问它？

【参考方案1】：

对您的 Image 实体模型使用虚拟属性。 像这样：

protected $_virtual = ['fullpathimage'];

protected function _getFullpathimage() 
  $baseUrl = Configure::read('App.fullBaseUrl');
  return $baseUrl.$this->get('imagepath');

图片的完整路径将显示在“imagepath”属性中