javascript - Spring MVC - JS文件实习生需要使用CSS加载backgroundImage

Question

我正在为我的元素使用 Spring-MVC 结构。我在其中设置了静态资源处理，并且我能够很好地访问我的 JSP 页面中的 css、js 和图像。

现在，我正在添加 1 个 js 文件(链接为 JSP 的外部文件)，该文件用于为动态创建的元素设置一个背景图像。问题是 - 因为它试图设置 backgroundImage 如下(它在本地浏览器中工作正常)，但在服务器上不允许(作为静态资源)。

( function( $ ){

$.fn.speedometer = function( options ){ 

    var $this = $( this );

    if ( $this.length > 1 ) {
        $this.each( function(){
            $( this ).speedometer( options );

        });
        return $this;
    }   

    var def = {
        /* If not specified, look in selector's innerHTML before defaulting to zero. */
        percentage : $.trim( $this.html() ) || 0,
        scale: 100,
        limit: true,
        minimum: 0,
        maximum: 100,
        suffix: ' %',
        animate:true,
        thisCss: {
            position: 'relative', /* Very important to align needle with gague. */
            width: '210px',
            height: '180px',
            padding: '0px',
            border: '0px',
            fontFamily: 'Arial',
            fontWeight: '900',
            backgroundImage : "url('./background.jpg')"

    ---------------
    ---------------

因此，类似于 JSP(使用 taglib)- 我正在尝试如下设置 backgroundImage:

    backgroundImage : "url(<spring:url value='/images/background.jpg'/>)"

这对我不起作用。我被困在这里，尝试了多种方法，但对我没有任何帮助。其中 1 个是:使用 css 类设置 BackgroundImage。我也尝试创建一个类:

    .myClass{         
     background-image: url(<spring:url value='/images/background.jpg'/>);
     } 

但是调用函数来应用它对我来说是一个很大的挑战。这是完整的 js 代码:

( function( $ ){

    $.fn.speedometer = function( options ){

        /* A tad bit speedier, plus avoids possible confusion with other $(this) references. */
        var $this = $( this );



        /* handle multiple selectors */
        if ( $this.length > 1 ) {
            $this.each( function(){
                $( this ).speedometer( options );

            });
            return $this;
        }   

        var def = {
            /* If not specified, look in selector's innerHTML before defaulting to zero. */
            percentage : $.trim( $this.html() ) || 0,
            scale: 100,
            limit: true,
            minimum: 0,
            maximum: 100,
            suffix: ' %',
            animate:true,
            thisCss: {
                position: 'relative', /* Very important to align needle with gague. */
                width: '210px',
                height: '180px',
                padding: '0px',
                border: '0px',
                fontFamily: 'Arial',
                fontWeight: '900',
                backgroundImage : "url('./background.jpg')"


            },
            digitalCss: {
                backgroundColor:'black',
                borderColor:'#555555 #999999 #999999 #555555',
                borderStyle:'solid',
                borderWidth:'2px',
                color:'white',
                fontSize:'14px',
                height:'20px',
                left:'72px',
                padding:'0px',
                position:'absolute',
                textAlign:'center',
                top:'65px',
                width:'60px',
                zIndex:'10',
                lineHeight:'20px',
                overflow:'hidden'
            }
        }



        $this.html( '' );

        $this.css( def.thisCss );

        $.extend( def, options );

        /* out of range */
        if ( def.limit && ( def.percentage > def.maximum || def.percentage < def.minimum ) ) {
            /* the glass cracks */
            $this.css( 'backgroundImage' , 'url("./background-broken.jpg")' );
        } else {







            /* call modified jqcanvas file to generate needle line */
            $this.jqcanvas ( function ( canvas, width, height ) {

                var ctx = canvas.getContext ( "2d" ),
                lingrad, thisWidth;

                ctx.lineWidth = 2;
                ctx.strokeStyle = "rgb(255,0,0)";

                /* point of origin for drawing AND canvas rotation (lines up with middle of the black circle on the image) */
                ctx.translate( 105,105 );   

                ctx.save(); //remember linewidth, strokestyle, and translate

                function animate(){     

                    ctx.restore(); //reset ctx.rotate to properly draw clearRect
                    ctx.save(); //remember this default state again

                    ctx.clearRect( -105, -105, 300, 300 ); //erase the canvas





                    /* rotate based on percentage. */
                    ctx.rotate( i * Math.PI / def.scale );



                    /* draw the needle */
                    ctx.beginPath();
                    ctx.moveTo( -80,0 );
                    ctx.lineTo( 10,0 );
                    ctx.stroke();

                    /* internally remember current needle value */
                    $this.data('currentPercentage',i);

                    if ( i != def.percentage ) {

                        //properly handle fractions
                        i += Math.abs( def.percentage - i ) < 1 ? def.percentage - i : def.increment;

                        setTimeout(function(){
                            animate()
                        },20);
                    }
                }               

                /* Are we animating or just displaying the percentage? */
                if (def.animate) {
                    var i = parseInt( $this.data('currentPercentage') ) || 0;
                    def.increment = ( i < def.percentage ) ? 1 : -1;
                } else {
                    var i = ( def.percentage );
                }


                animate();




            }, { verifySize: false, customClassName: '' } );



        }

        /* digital percentage displayed in middle of image */

        var digitalGauge = $( '<div></div>' );
        $this.append( digitalGauge );
        digitalGauge.css( def.digitalCss );
        digitalGauge.text( def.percentage + def.suffix );



        return $this;

    }



})( jQuery )

如有任何更好的建议，我们将不胜感激。

Answer 1

我必须解决这个问题! 实习生设置背景图片的 JS 代码在某处出现问题。所以，我已经使用 CSS 类加载了背景图像。