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

问题描述

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

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

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

我已经在代码中尝试了几件事，但是在这里看不到它们之间的关系。.我正在尝试从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;

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

使用此URL，我可以通过浏览器访问图像。为什么我不能从img html元素访问它？

解决方法

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

protected $_virtual = ['fullpathimage'];

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

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

cakephp vue.js