从 Vue 访问 CakePHP webroot 目录：Image Load

Question

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

在我的前端访问静态资源没有问题，将动态资源上传到我的后端也没有问题。我只是发现很难从我的前端访问它们。我的后端 url 是“http:///wampprojects/holidays_backend/”。问题是 'how can I set an img src attribute to load an asset from the backend?'.

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

我在代码中尝试了一些东西，但看不出它们与这里有什么关系。我正在尝试从 CakePHP 后端在 Vue 中设置一个 img url..

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

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

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

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

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

Answer 1

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

protected $_virtual = ['fullpathimage'];

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

您的图像的完整路径将出现在“图像路径”中属性

从 Vue 访问 CakePHP webroot 目录：Image Load

Access CakePHP webroot directory from Vue : Image Load

cakephp

vue.js