I am trying to create an app using Monaca.
What I want to do is to use the cdvfile protocol to display images of in-app sandboxes.
Therefore, there is a source like the one below, but if you specify it directly at the top, it was displayed without any problems.
Next, I wanted to create a location dynamically, so I tried to bind it like the bottom, but the image was not displayed.
Is this a specification?
If anyone knows, please take care of me.
<!DOCTYPE html>
<htmlng-app="myApp">
<head>
<metacharset="UTF-8"/>
</head>
<bodying-controller="test">
<div>
<img src="cdvfile://localhost/library-nosync/image/test.jpg"/>
</div>
<div>
<img src={{dir}}/>
</div>
<script>
angular.module('myApp',[])
.controller('test', function($scope){
$scope.dir="cdvfile://localhost/library-nosync/image/test.jpg";
}]);
</script>
</body>
</html>
I solved myself.
When I looked closely at the source, it said srcunsafe, so I couldn't display the image.
Each site says that security policies must be configured when using cdvfile, but it doesn't work well when configured with Monaca as a reference.
<meta http-equiv="Content-Security-Policy" content="default-src'self'data:gap:cdvfile:https://ssl.gstatic.com'unsafe-eval';style-src'self'''unsafe-inline';media-src*">
They recognized it by erasing the space between the default-src'self's.
I didn't know why it didn't work here, so I had a hard time...
Further recognition requires human ingenuity.
var app=angular.module('myApp');
app.config(function($compileProvider){
$compileProvider.imgSrcSanitizationWhitelist(/^\s*(cdvfile|file):|data:image\//);
});
I had to add cdvfile to the whitelist.
Also, when I added this config, the local src no longer recognizes it, so I added a file.
I don't know the details of the movement, but this has been solved, so I hope it will be helpful next time.
© 2024 OneMinuteCode. All rights reserved.