在Laravel 5刀片模板中包含SVG文件(位于assets文件夹中)的内容的最佳方法是什么?
我不想使用image / object / embed标签,出于速度原因,这应该是内联SVG。
我知道我可以使用<?php file_get_contents("file.svg") ?>
但是有更好的方法专门针对Laravel / Blade吗?
编辑:为了澄清,该方法应该与所有 SVG文件一起使用,包括下面的文件。
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg">
<path stroke="red" fill="#00f" d="M10 10h100v100H10z"/>
</svg>
答案 0 :(得分:17)
与接受的答案类似,但有点清洁(imo)。
使用laravel指令扩展刀片,就像这样(在您的App Service Provider中,按照here概述):
\Blade::directive('svg', function($arguments) {
// Funky madness to accept multiple arguments into the directive
list($path, $class) = array_pad(explode(',', trim($arguments, "() ")), 2, '');
$path = trim($path, "' ");
$class = trim($class, "' ");
// Create the dom document as per the other answers
$svg = new \DOMDocument();
$svg->load(public_path($path));
$svg->documentElement->setAttribute("class", $class);
$output = $svg->saveXML($svg->documentElement);
return $output;
});
然后在你的刀片中使用它:
<div class="Login__image Login__cloud">
@svg('cloud.svg', 'Cloud')
</div>
答案 1 :(得分:16)
这是有效的,这是我能想到的最简单的方法:
com.netflix.zuul.exception.ZuulException: Forwarding error
at org.springframework.cloud.netflix.zuul.filters.route.RibbonRoutingFilter.forward(RibbonRoutingFilter.java:146)
at org.springframework.cloud.netflix.zuul.filters.route.RibbonRoutingFilter.run(RibbonRoutingFilter.java:110)
at com.netflix.zuul.ZuulFilter.runFilter(ZuulFilter.java:112)
at com.netflix.zuul.FilterProcessor.processZuulFilter(FilterProcessor.java:197)
at com.netflix.zuul.FilterProcessor.runFilters(FilterProcessor.java:161)
at com.netflix.zuul.FilterProcessor.route(FilterProcessor.java:120)
at com.netflix.zuul.ZuulRunner.route(ZuulRunner.java:84)
at com.netflix.zuul.http.ZuulServlet.route(ZuulServlet.java:111)
at com.netflix.zuul.http.ZuulServlet.service(ZuulServlet.java:77)
at org.springframework.web.servlet.mvc.ServletWrappingController.handleRequestInternal(ServletWrappingController.java:158)
at org.springframework.cloud.netflix.zuul.web.ZuulController.handleRequestInternal(ZuulController.java:43)
at org.springframework.web.servlet.mvc.AbstractController.handleRequest(AbstractController.java:146)
at org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter.handle(SimpleControllerHandlerAdapter.java:50)
at org.springframework.web.servlet.DispatcherServlet.doDispatch(DispatcherServlet.java:943)
at org.springframework.web.servlet.DispatcherServlet.doService(DispatcherServlet.java:877)
at org.springframework.web.servlet.FrameworkServlet.processRequest(FrameworkServlet.java:966)
at org.springframework.web.servlet.FrameworkServlet.doPost(FrameworkServlet.java:868)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:644)
at org.springframework.web.servlet.FrameworkServlet.service(FrameworkServlet.java:842)
at javax.servlet.http.HttpServlet.service(HttpServlet.java:725)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:291)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.tomcat.websocket.server.WsFilter.doFilter(WsFilter.java:52)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.springframework.boot.actuate.autoconfigure.EndpointWebMvcAutoConfiguration$ApplicationContextHeaderFilter.doFilterInternal(EndpointWebMvcAutoConfiguration.java:291)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:77)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.springframework.boot.actuate.trace.WebRequestTraceFilter.doFilterInternal(WebRequestTraceFilter.java:102)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.springframework.web.filter.CharacterEncodingFilter.doFilterInternal(CharacterEncodingFilter.java:88)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.springframework.boot.actuate.autoconfigure.MetricFilterAutoConfiguration$MetricsFilter.doFilterInternal(MetricFilterAutoConfiguration.java:90)
at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:239)
at org.apache.catalina.core.ApplicationFilterChain.doFilter(ApplicationFilterChain.java:206)
at org.apache.catalina.core.StandardWrapperValve.invoke(StandardWrapperValve.java:219)
at org.apache.catalina.core.StandardContextValve.invoke(StandardContextValve.java:106)
at org.apache.catalina.authenticator.AuthenticatorBase.invoke(AuthenticatorBase.java:501)
at org.apache.catalina.core.StandardHostValve.invoke(StandardHostValve.java:142)
at org.apache.catalina.valves.ErrorReportValve.invoke(ErrorReportValve.java:79)
at org.apache.catalina.core.StandardEngineValve.invoke(StandardEngineValve.java:88)
at org.apache.catalina.connector.CoyoteAdapter.service(CoyoteAdapter.java:516)
at org.apache.coyote.http11.AbstractHttp11Processor.process(AbstractHttp11Processor.java:1086)
at org.apache.coyote.AbstractProtocol$AbstractConnectionHandler.process(AbstractProtocol.java:659)
at org.apache.coyote.http11.Http11NioProtocol$Http11ConnectionHandler.process(Http11NioProtocol.java:223)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.doRun(NioEndpoint.java:1558)
at org.apache.tomcat.util.net.NioEndpoint$SocketProcessor.run(NioEndpoint.java:1515)
at java.util.concurrent.ThreadPoolExecutor.runWorker(ThreadPoolExecutor.java:1142)
at java.util.concurrent.ThreadPoolExecutor$Worker.run(ThreadPoolExecutor.java:617)
at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
at java.lang.Thread.run(Thread.java:745)
Caused by: com.netflix.hystrix.exception.HystrixRuntimeException: demo-serviceRibbonCommand failed and no fallback available.
at com.netflix.hystrix.AbstractCommand$20.call(AbstractCommand.java:816)
at com.netflix.hystrix.AbstractCommand$20.call(AbstractCommand.java:798)
at rx.internal.operators.OperatorOnErrorResumeNextViaFunction$1.onError(OperatorOnErrorResumeNextViaFunction.java:76)
at rx.internal.operators.OperatorDoOnEach$1.onError(OperatorDoOnEach.java:70)
at rx.internal.operators.OperatorDoOnEach$1.onError(OperatorDoOnEach.java:70)
at rx.Observable$ThrowObservable$1.call(Observable.java:10493)
at rx.Observable$ThrowObservable$1.call(Observable.java:10483)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at rx.internal.operators.OperatorOnErrorResumeNextViaFunction$1.onError(OperatorOnErrorResumeNextViaFunction.java:77)
at rx.internal.operators.OperatorMap$1.onError(OperatorMap.java:48)
at com.netflix.hystrix.HystrixCommand$2.call(HystrixCommand.java:318)
at com.netflix.hystrix.HystrixCommand$2.call(HystrixCommand.java:310)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at rx.internal.operators.OperatorOnErrorResumeNextViaFunction$1.onError(OperatorOnErrorResumeNextViaFunction.java:77)
at rx.internal.operators.OperatorDoOnEach$1.onError(OperatorDoOnEach.java:70)
at rx.internal.operators.OperatorMap$1.onError(OperatorMap.java:48)
at com.netflix.hystrix.AbstractCommand$HystrixObservableTimeoutOperator$3.onError(AbstractCommand.java:995)
at rx.internal.operators.OperatorDoOnEach$1.onError(OperatorDoOnEach.java:70)
at rx.internal.operators.OperatorDoOnEach$1.onError(OperatorDoOnEach.java:70)
at rx.Observable$ThrowObservable$1.call(Observable.java:10493)
at rx.Observable$ThrowObservable$1.call(Observable.java:10483)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at rx.internal.operators.OperatorOnErrorResumeNextViaFunction$1.onError(OperatorOnErrorResumeNextViaFunction.java:77)
at rx.internal.operators.OperatorMap$1.onError(OperatorMap.java:48)
at com.netflix.hystrix.HystrixCommand$1.call(HystrixCommand.java:301)
at com.netflix.hystrix.HystrixCommand$1.call(HystrixCommand.java:293)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at com.netflix.hystrix.AbstractCommand$1.call(AbstractCommand.java:388)
at com.netflix.hystrix.AbstractCommand$1.call(AbstractCommand.java:368)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at com.netflix.hystrix.AbstractCommand$ObservableCommand$1.call(AbstractCommand.java:1097)
at com.netflix.hystrix.AbstractCommand$ObservableCommand$1.call(AbstractCommand.java:1093)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.subscribe(Observable.java:8680)
at rx.internal.operators.BlockingOperatorToFuture.toFuture(BlockingOperatorToFuture.java:55)
at rx.observables.BlockingObservable.toFuture(BlockingObservable.java:420)
at com.netflix.hystrix.HystrixCommand.queue(HystrixCommand.java:385)
at com.netflix.hystrix.HystrixCommand.execute(HystrixCommand.java:339)
at org.springframework.cloud.netflix.zuul.filters.route.RibbonRoutingFilter.forward(RibbonRoutingFilter.java:130)
... 60 common frames omitted
Caused by: com.netflix.client.ClientException: null
at com.netflix.client.AbstractLoadBalancerAwareClient.executeWithLoadBalancer(AbstractLoadBalancerAwareClient.java:123)
at com.netflix.client.AbstractLoadBalancerAwareClient.executeWithLoadBalancer(AbstractLoadBalancerAwareClient.java:81)
at org.springframework.cloud.netflix.zuul.filters.route.RibbonCommand.forward(RibbonCommand.java:129)
at org.springframework.cloud.netflix.zuul.filters.route.RibbonCommand.run(RibbonCommand.java:103)
at org.springframework.cloud.netflix.zuul.filters.route.RibbonCommand.run(RibbonCommand.java:48)
at com.netflix.hystrix.HystrixCommand$1.call(HystrixCommand.java:298)
... 103 common frames omitted
Caused by: java.net.SocketTimeoutException: Read timed out
at java.net.SocketInputStream.socketRead0(Native Method)
at java.net.SocketInputStream.socketRead(SocketInputStream.java:116)
at java.net.SocketInputStream.read(SocketInputStream.java:170)
at java.net.SocketInputStream.read(SocketInputStream.java:141)
at org.apache.http.impl.io.AbstractSessionInputBuffer.fillBuffer(AbstractSessionInputBuffer.java:160)
at org.apache.http.impl.io.SocketInputBuffer.fillBuffer(SocketInputBuffer.java:84)
at org.apache.http.impl.io.AbstractSessionInputBuffer.readLine(AbstractSessionInputBuffer.java:273)
at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:140)
at org.apache.http.impl.conn.DefaultHttpResponseParser.parseHead(DefaultHttpResponseParser.java:57)
at org.apache.http.impl.io.AbstractMessageParser.parse(AbstractMessageParser.java:260)
at org.apache.http.impl.AbstractHttpClientConnection.receiveResponseHeader(AbstractHttpClientConnection.java:283)
at org.apache.http.impl.conn.DefaultClientConnection.receiveResponseHeader(DefaultClientConnection.java:251)
at org.apache.http.impl.conn.AbstractClientConnAdapter.receiveResponseHeader(AbstractClientConnAdapter.java:223)
at org.apache.http.protocol.HttpRequestExecutor.doReceiveResponse(HttpRequestExecutor.java:271)
at org.apache.http.protocol.HttpRequestExecutor.execute(HttpRequestExecutor.java:123)
at org.apache.http.impl.client.DefaultRequestDirector.tryExecute(DefaultRequestDirector.java:685)
at org.apache.http.impl.client.DefaultRequestDirector.execute(DefaultRequestDirector.java:487)
at org.apache.http.impl.client.AbstractHttpClient.doExecute(AbstractHttpClient.java:863)
at org.apache.http.impl.client.CloseableHttpClient.execute(CloseableHttpClient.java:115)
at org.apache.http.impl.client.CloseableHttpClient.execute(CloseableHttpClient.java:57)
at com.sun.jersey.client.apache4.ApacheHttpClient4Handler.handle(ApacheHttpClient4Handler.java:170)
at com.sun.jersey.api.client.Client.handle(Client.java:648)
at com.sun.jersey.api.client.WebResource.handle(WebResource.java:680)
at com.sun.jersey.api.client.WebResource.access$200(WebResource.java:74)
at com.sun.jersey.api.client.WebResource$Builder.post(WebResource.java:568)
at com.netflix.niws.client.http.RestClient.execute(RestClient.java:621)
at com.netflix.niws.client.http.RestClient.execute(RestClient.java:527)
at com.netflix.niws.client.http.RestClient.execute(RestClient.java:92)
at com.netflix.client.AbstractLoadBalancerAwareClient$1.call(AbstractLoadBalancerAwareClient.java:109)
at com.netflix.loadbalancer.reactive.LoadBalancerCommand$3$1.call(LoadBalancerCommand.java:303)
at com.netflix.loadbalancer.reactive.LoadBalancerCommand$3$1.call(LoadBalancerCommand.java:287)
at rx.internal.operators.OperatorMap$1.onNext(OperatorMap.java:54)
at rx.internal.util.ScalarSynchronousObservable$1.call(ScalarSynchronousObservable.java:41)
at rx.internal.util.ScalarSynchronousObservable$1.call(ScalarSynchronousObservable.java:30)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at rx.internal.operators.OperatorConcat$ConcatSubscriber.subscribeNext(OperatorConcat.java:163)
at rx.internal.operators.OperatorConcat$ConcatSubscriber.onNext(OperatorConcat.java:128)
at rx.internal.operators.OperatorConcat$ConcatSubscriber.onNext(OperatorConcat.java:65)
at rx.internal.operators.OperatorMap$1.onNext(OperatorMap.java:54)
at com.netflix.loadbalancer.reactive.LoadBalancerCommand$1.call(LoadBalancerCommand.java:185)
at com.netflix.loadbalancer.reactive.LoadBalancerCommand$1.call(LoadBalancerCommand.java:180)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.unsafeSubscribe(Observable.java:8591)
at rx.internal.operators.OperatorRetryWithPredicate$SourceSubscriber$1.call(OperatorRetryWithPredicate.java:112)
at rx.schedulers.TrampolineScheduler$InnerCurrentThreadScheduler.enqueue(TrampolineScheduler.java:85)
at rx.schedulers.TrampolineScheduler$InnerCurrentThreadScheduler.schedule(TrampolineScheduler.java:65)
at rx.internal.operators.OperatorRetryWithPredicate$SourceSubscriber.onNext(OperatorRetryWithPredicate.java:77)
at rx.internal.operators.OperatorRetryWithPredicate$SourceSubscriber.onNext(OperatorRetryWithPredicate.java:45)
at rx.internal.util.ScalarSynchronousObservable$1.call(ScalarSynchronousObservable.java:41)
at rx.internal.util.ScalarSynchronousObservable$1.call(ScalarSynchronousObservable.java:30)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable$2.call(Observable.java:173)
at rx.Observable$2.call(Observable.java:166)
at rx.Observable.subscribe(Observable.java:8680)
at rx.observables.BlockingObservable.blockForSingle(BlockingObservable.java:452)
at rx.observables.BlockingObservable.single(BlockingObservable.java:348)
at enter code herecom.netflix.client.AbstractLoadBalancerAwareClient.executeWithLoadBalancer(AbstractLoadBalancerAwareClient.java:102)
... 108 common frames omitted
答案 2 :(得分:9)
为什么不将svg放入刀片模板?
resources/views/icons/dashboard.blade.php
然后使用刀片语法添加您的视图?
@include('icons.dashboard')
答案 3 :(得分:5)
我最终在服务提供商中使用了一个视图编辑器。
在服务提供商的boot()
方法中:
// Wildcard view composer
view()->composer('*', function($view) {
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Get XML without version element
$logo = $svg->saveXML($svg->documentElement);
// Attach data to view
$view->with('logo', $logo);
});
在我看来:
<!-- Echo unescaped SVG content -->
{!! $logo !!}
我正在使用DOMDocument
因为它允许我删除不应该在HTML中的XML版本元素。
CSS类不是必需的,但可以节省我用另一个HTML元素包装徽标以进行样式化。
如果您只需要特定刀片部分中的徽标,例如标题,您可以写
view()->composer('header', function($view) {});
http://laravel.com/docs/5.0/views#view-composers
https://laracasts.com/series/laravel-5-fundamentals/episodes/25
这种方法不是最佳实践,因为这种代码实际上不应该在视图中。然而,它比在每个视图中添加PHP代码都简单得多。
使用以下代码创建一个新的部分(让我们说logo.blade.php):
<?php
// Instantiate new DOMDocument object
$svg = new DOMDocument();
// Load SVG file from public folder
$svg->load(public_path('images/logo.svg'));
// Add CSS class (you can omit this line)
$svg->documentElement->setAttribute("class", "logo");
// Echo XML without version element
echo $svg->saveXML($svg->documentElement);
?>
您现在可以在刀片模板中使用SVG图像,方法是将部分包括在内:
@include('logo')