CSS background images 路径找不到

[eightfeet]

用脚手架build prd时出现dist下css文件background-image找不到路径的情况，生成目录如下

|------dist
|------|------static
|------|------|-----css
|------|------|------|------app.436040cbfa6aab8cd7ca62e837db8eea.css
|------|------|------js
|------|------|------img
|------|------|------|------mix.a3cf3e7.png
|------|------index.html

生成css如下

.mainbg{
    background-image:url(/static/img/mix.a3cf3e7.png);
}

导致url路径找不到
理想状态应该是这样才能找到
background-image:url(../img/mix.a3cf3e7.png);
怎么破

[ksora94]

我遇到了同样的问题

我的解决方法是在build的时候修改webpack配置文件的output.publicPath项

这一定不是最好的办法，希望可以帮到你

[eightfeet]

@ksora Thanks

[eightfeet]

@ksora 你是怎么修改的？

[ksora94]

最后build生成的css图片url是根据publicPath和url-loader的配置生成的

比如

output: {
        path: path.resolve(__dirname, './dist'),
        publicPath: '/dist/',
        filename: 'build.js'
    }

{
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'url',
        query: {
                limit: 10000,
                name: 'image/[name].[ext]?[hash]'
        }
}

那么最后生成的url路径就是/dist/image/[name].[ext]?[hash]，即publicPath + query.name

结合你工程的具体情况配置一下吧，如果方便的话建议还是不要随意修改publicPath，修改后hot-reload可能会出现问题==

[xierenyuan]

@eightfeet 我以遇到了这个问题,搞了半天最后我无耻的 把loader 重写 替换了下路径. 我发布在npm 呢 https://www.npmjs.com/package/u-loader 使用
使用

{
            test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
            loader: 'u',
            query: {
                limit: 10000,
                name: utils.assetsPath('img/[name].[hash:7].[ext]')
            }
        }, {
            test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
            loader: 'u',
            query: {
                limit: 10000,
                name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
            }
        }

[atoanofish]

如果是在js 中的话 最好的办法是通过require 引入 比如src=requre('assets/src/img/1.png');还有就是路径要写在webpack 中配置的路径哦。

[unliar]

// assetsPublicPath: '/',
把config/index.js 里的这一行注释下 试试

[zhangbiggs]

// assetsPublicPath: '/',
把config/index.js 里的这一行注释下 能用

[zigomir]

Closing because it's not vue-cli related issue. If this problem comes from one of official vuejs-templates, please open issue there.

[zhangbiggs]

解决方案/issue179希望能帮到你

这个问题的原因出于引人css在webpack打包后，资源引人的路径与打包后的路径不同造成，style-loder 无法自己设置publicpath, 所以只能在ExtractTextPlugin后的css目录路径 ，或者css引人放在index.html的头，不提取到合并的css中

---

[zhaotoday]

我项目用到 sass，也有遇到这个的问题，后面改了样式文件的引入方式就解决了。

<style lang="scss" scoped src="./theme/styles/index.scss">
</style>

代码如下：
https://github.com/zhaotoday/vue.js/blob/master/src/app/Articles/components/ChildComp/index.vue#L19

[SmalLfat401]

我这边是这么处理的：
build>webpack.base.conf.js里面
test: /.(png|jpe?g|gif|svg)(?.)?$/,
loader: 'url-loader',
options: {
limit: 10000, 改成 limit: 102400,
name: utils.assetsPath('img/[name].[hash:7].[ext]')
}
之后在.vue中写 background-image: url(../../assets/.png);
不要使用background:url(../../assets/*.png) 就行了
可以正常显示图片

[Jesseszhang]

add this npm install html-loader
{
test: /.(html|tpl)$/,
loader: 'html-loader'
}
in webpack.base.conf.js rules

[OoTankoO]

我项目用到 sass，也有遇到这个的问题，后面改了样式文件的引入方式就解决了。

<style lang="scss" scoped src="./theme/styles/index.scss">
</style>

代码如下：
https://github.com/zhaotoday/vue.js/blob/master/src/app/Articles/components/ChildComp/index.vue#L19

知道是什么原理吗？？我基础不太好，试了好多种方法就这个可行....

[mcc-like-thinking]

用脚手架build prd时出现dist下css文件background-image找不到路径的情况，生成目录如下

|------dist
|------|------static
|------|------|-----css
|------|------|------|------app.436040cbfa6aab8cd7ca62e837db8eea.css
|------|------|------js
|------|------|------img
|------|------|------|------mix.a3cf3e7.png
|------|------index.html

生成css如下

.mainbg{
    background-image:url(/static/img/mix.a3cf3e7.png);
}

导致url路径找不到
理想状态应该是这样才能找到
background-image:url(../img/mix.a3cf3e7.png);
怎么破

@eightfeet 你好，这个问题解决了吗？

[xielearncode]

background-image: url("~@/assets/app_images/leadspace.png");

assets 在 src 目录下
js中用 @ 代表当前目录，css中使用 ~@ 代表当前目录