I am have a function qsys::getFullUrl()
in PHP which resolves the full URL to images.
Inside the parameter, I need to include an angular variable.
Surprisingly, this actually works, and shows the image:
<tr ng-repeat="book in books | orderBy:'rank':true">
<td style="border-top:none"><img style="width: 100px" src="<?= qsys::getFullUrl('customImages/{{book.idcode}}.png') ?>"/></td>
<td style="border-top:none" >
<div class="h4">{{book.title}}</div>
<div><small>{{book.description}}</small></div>
</td>
</tr>
However, I also get Javascript errors:
NetworkError: 404 Not Found - http://localhost/test/customImages/%7B%7Bbook.idcode%7D%7D.png"
How can I get rid of these JavaScript errors?
I don't know much about Angular, but in PHP I would probably do something like this:
<?= url_decode(qsys::getFullUrl('customImages/{{book.idcode}}.png')) ?>
That will then decode the values, but it will decode everything that that function returns, so you might want to only decode that, which you could do this:
$book_file = qsys::getFullUrl('customImages/{{book.idcode}}.png');
echo str_replace("%7B%7Bbook.idcode%7D%7D", "{{book.idcode}}", $book_file) ?>
You could even have your string replace do this to just replace {
and }
:
$find = array("%7B","%7D");
$replace = array("{","}");
echo str_replace($find, $replace, qsys::getFullUrl('customImages/{{book.idcode}}.png')) ?>
Using either of these methods should get you a url that finalizes to the browser like this:
http://localhost/test/customImages/{{book.idcode}}.png"
Angular should then be able to handle it.
I solved this with ng-src
:
<tr ng-repeat="book in books| orderBy:'rank':true">
<td style="border-top:none"><img style="width: 100px" ng-src="{{absolutePath}}customImages/{{book.idcode}}.png"/></td>
<td style="border-top:none" >
<div class="h4">{{book.title}}</div>
<div><small>{{book.description}}</small></div>
</td>
</tr>
and by putting the fullUrl in the module:
$scope.absolutePath = '<?= qsys::getFullUrl() ?>';