jhipster中图片路径打包问题(webpack)

在使用jhipster时,如果给样式指定了图片背景,必须使用绝对路径,一旦使用相对路径就会报错。

‘css-loader‘这个控件报错。

折腾了半天,终于找到了配置路径的地方。

在webpack的配置文件中,

module.rules数组中,找到与.css文件匹配的正则,

jhipster默认使用的是loaders,如下

{
    test: /\.css$/,
    loaders: [‘to-string-loader‘, ‘css-loader‘]
    exclude: /(vendor\.css|global\.css)/
}

  使用loaders就无法配置使用插件的选项,后来在github上的一个例子中看到了use的配置方法,或让开朗(英语差,看官方文档懵懵懂懂)

然后,改成下面这样就行了

{
    test: /\.css$/,
    use: [
        { loader: ‘to-string-loader‘},
        {
            loader: ‘css-loader‘,
            options: {
                url: false
            }
        }
    ],
    exclude: /(vendor\.css|global\.css)/
}

  使用 use 就能够单个配置插件了。

时间: 2024-10-01 01:28:32

jhipster中图片路径打包问题(webpack)的相关文章

透过现象看webpack处理css文件中图片路径转换的具体过程

webpack是目前使用比较流行的一个前端模块打包器,前端的任何资源都被当成一个模块来处理,如图片.css文件等等.在基于webpack构建的前端项目中,一般都会配置有关css文件处理的规则,这其中也包括css文件中图片资源的处理,那么webpack到底是怎么处理它的呢?笔者之前也遇到过类似图片路劲的问题,为此还写过一篇博文webpack生成的css文件background-image url图片无法加载.今天就来说说webpack是怎么处理css文件中的图片路径的,首先上一个具体的例子. 一个

kindeditor文本编辑器删除文本中图片路径出错

string[] imgname; MODEL.Strategy modelMenu = bllMenu.GetModel(int.Parse(strId)); imgname = getPicUrl.getPicUrls(modelMenu.SContent).Split('|'); foreach (string c in imgname) { ImageHelper.DeleteImg(HttpContext.Current.Server.MapPath(c)); } kindeditor

Silverlight 中图片路径的设置

在Silverlight中图片的设置方法有几种 如上图在一个工程中有个images文件夹,buttons.xaml页面中的Image控件要引用一张图片 第一种方法 xaml: <Image x:Name="myImage" Source="/SilverlightCreate;component/images/MyImage1.png" /> code: myImage.Source = new BitmapImage(new Uri("/Si

IE浏览器中图片路径正确&lt; img ... /&gt;标签不显示图片

如下图所示,下面的html要去加载上面的jpg图片: 代码如下: <img src="luzhanshi1.jpg" alt="图片加载失败"> 使用谷歌打开这个html图片正常显示,但是使用IE浏览器就显示图片加载失败 路径肯定没有错,后来想了想,这个jpg图片原来是png格式的,我只不过强制把后缀名改了,最后我采取下面的办法解决了问题: 原文地址:https://www.cnblogs.com/luzhanshi/p/11009695.html

获取文章中图片路径的正则表达式

String content = "<p><img src="http://xxx.com/image/635.png" alt="bg" style="max-width:100%;"><img src="http://ssss.com/image/d17c.jpg" alt="spe-03" style="max-width: 100%;"&g

Webpack中的路径

webpack中涉及许多路径参数的配置.在此做个整理. context context是webpack编译时的基础目录,entry入口会相对于此目录查找. 若不配置,默认值是当前目录,webpack设置context.默认值代码: this.set("context", process.cwd()); 即webpack运行所在目录. context应该是绝对路径,假设入口是src/main.js,则可以设置 { context: path.resolve("./src&quo

vue-cli在打包后js获取的图片路径错误问题时候

在用npm run build 打包的时候,正常img标签中的src图片路径和css中的图片路径是可以正常识别的, 但是在打包js获取的图片路径时,打包后无法找到图片,原因是 js动态生成的路径无法被url-loader解析到,如果你去build,会发现图片甚至不会打包输出到dist目录(webpack是按需打包的). 如果你是vue-cli初始化的项目,解决的办法:第一步,把图片放到src同级的static目录(build/build.js文件中有一段代码是把static目录拷贝到dist/s

【webpack】---url-loader 图片路径问题

webpack:url-loader 图片路径问题 我们使用webpack打包项目中,在处理图片路径时, 最常用的loader有两种, url-loader 和 file-loader. 我们在写项目中引用路径的时候,填写的URL是基于我们开发时的路径, 但是在webpack打包时, 会将各个模块打包成一个文件,里面引用的路径是相对于入口html文件,并不是相对于我们的原始文件路径的.loader 可以解析项目中引入的URL,并且根据配置,把图片拷贝到相应路径, 再将打包后的文件中的路径 替换为

如何获得images.xcassets 中图片的路径?

UIImage加载图片的方式以及Images.xcassets对于加载方法的影响 重点: Images.xcassets中的图片资源只能通过imageNamed:方法加载,通过NSBundle的pathForResource:ofType:无法获得图片路径.因此,Images.xcassets只适合存放系统常用的,占用内存小的图片资源. 图片缓存 根据是否将创建好的对象缓存入系统内存,有两类创建UIImage对象的方法可选: 缓存:+ imageNamed:,只需传入文件名.扩展名(可选)即可.