I have a owl carousel list of images:
<div id="owl-demo" class="owl-carousel">
<div class="item"><img src="{{URL::asset('img/app-screen/screen1.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen2.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen3.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen4.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen5.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen6.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen7.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen2.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen5.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen1.png')}}"></div>
<div class="item"><img src="{{URL::asset('img/app-screen/screen6.png')}}"></div>
</div>
which was functioning perfectly until I implemented CSP. I suspect there might be an issue with my rules (I am using laravel's spatie/laravel-csp package). Here are the rules I have defined:
public function configure()
{
$this->addDirective(Directive::BASE, Value::SELF)
->addDirective(Directive::CONNECT, Value::SELF)
->addDirective(Directive::DEFAULT, Value::SELF)
->addDirective(Directive::FORM_ACTION, Value::SELF)
->addDirective(Directive::IMG, Value::SELF)
->addDirective(Directive::MEDIA, Value::SELF)
->addDirective(Directive::OBJECT, Value::SELF)
->addDirective(Directive::SCRIPT, Value::SELF)
->addDirective(Directive::STYLE, Value::SELF);
}
Please note that owl carousel does not contain any inline code and all JavaScript and CSS files are stored in the project.