vue中css背景图打包后不显示

最新推荐文章于 2024-07-08 16:22:31 发布

原创最新推荐文章于 2024-07-08 16:22:31 发布 · 420 阅读

0 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

59 篇文章

订阅专栏

本文介绍如何在build/utils.js文件中修改generateLoaders方法以增加publicPath属性，确保资源正确加载。此修改适用于Vue项目，通过调整ExtractTextPlugin配置实现。

修改 build/utils.js 中的 generateLoaders 方法，如下代码，增加 publicPath: '…/…/'

if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        publicPath: '../../',
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

苏喂苏喂苏喂su

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue CSS样式引入背景图写法（JS）：

laugh666的博客

09-04

733

通过以上的代码，我们可以在Vue.js中使用JavaScript来引入背景图并添加样式。这种方法使我们能够根据需要动态更改背景图，以及为其定义其他样式属性，从而实现丰富的用户界面效果。在Vue.js中，我们可以通过JavaScript来引入背景图，并为其添加样式。接下来，我们可以使用JavaScript来动态修改该属性，以实现动态变化的背景图。生命周期钩子函数中），我们将背景图的URL设置为我们想要的图像URL。需要注意的是，背景图的URL可以是任何有效的URL，包括本地文件路径或远程URL。

精选资源

详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

01-19

使用vue打包，通过css引用图片资源。 .img { height: 500px; width: 100%; background: url(./assets/img/1.jpg) no-repeat; background-size: 100%; } 热更新开发环境的效果是这样但打完包出来的页面却报...

参与评论您还未登录，请先登录后发表或查看评论

解决vuejs项目里css引用背景图片不能显示的问题

10-18

今天小编就为大家分享一篇解决vuejs项目里css引用背景图片不能显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决vue打包css文件中背景图片的路径问题

10-18

今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧

解决Vue打包后背景图片路径错误问题

源码好优多

03-08

2000

今天在插入背景图片过程中，遇到了路径错误的问题，通过网上查询，找到了解决的办法，但是大部分都没有讲造成这种问题的原因，故我简单地总结了一下，并加入了一些自己的理解，欢迎共同探讨~ 当用vue-cli自动构建项目后，有两种运行方法，分别是： npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。 npm run buil...

vue背景图，用css显示不出来

公z号：职场爱学习

06-25

1377

vue背景图，用css显示不出来 background-image: url(’…/…/…/assets/img/shopAuth/power.png’); 解决方法：用显示图片，不要用背景图。

解决Vue打包后访问图片/图标不显示的问题

10-16

总结一下，解决Vue打包后图片和图标不显示的问题主要涉及两个步骤：一是检查并修正CSS中引用资源的路径，二是通过配置`publicPath`让Vue CLI在打包时自动处理资源路径。完成这两个步骤后，你应该能够成功地在生产...

vue打包后CSS中引用的背景图片不显示问题

weixin_30244889的博客

11-22

626

vue项目中，在css样式中引用了一张背景图片，开发环境下是可以正常显示，build之后背景图片不显示。解决方法：找到build/utils.js文件修改成为如下所示内容：添加红框中的内容即可。转载于:https://www.cnblogs.com/qiao20/p/10001401.html...

解决vue中img或元素背景图片无法显示或路径错误问题

WanweI897的博客

08-01

5244

解决vue中img或元素背景图片无法显示或路径错误问题。

vue打包后背景图片不显示问题

weixin_34344677的博客

04-10

977

当用vue-cli自动构建项目后，有两种运行方法，分别是：npm run dev : 提供一个开发的环境，自动热更新，资源使用绝对路径，所以可以正常看到背景图片。npm run build : 打包项目，资源使用相对路径，所以会出现路径错误问题。绝对路径：从盘符开始的路径，如：C:\windows\system32\cmd.exe 相对路径：从当前路径开始的路径构建后的项目, 都需要...

vue 项目打包时样式及背景图片路径找不到的解决方式

12-13

问题描述：vue项目打包后，文件找得到，但是引用的字体及背景图片找不到；解决方法：主要是需要单独为 css 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api，可以为css单独配置 publicPath 。对于用 vue-cli 生成的项目，dist 目录结构如下： dist ├── index.html └── static ├── css ├── img └── js 经常遇见的问题是 css 中 background-image 的相对路径不能正确的引用到 img 文

vue打包后图片css中背景图路径不对

qq5678574的博客

12-11

362

问题描述：自己在自学vue做项目的过程中，遇到一个有关背景图片路径的问题，就是css代码中背景图片是根据相对路径来写的，如下图：当使用npm run dev命令本地访问的时候，背景图片是正常显示的，可使用npm run build命令打包后，访问dist目录下的项目，页面背景图路径就不对了，显示不出背景图。如下两张图对比：图一：使用npm run dev命令访问图二：使用npm run build命令打包之后，访问dist目录下的文件，出现的问题，背景图片路径变成了http://127.0.0.

Vue项目打包发布后CSS中的背景图片不显示

weixin_33874713的博客

07-01

486

相信有很多同学在学习vue的刚开始都遇到过项目打包发布后发现CSS中的背景图片不显示，具体如何解决只需要更改bind的配置即可修改build/utils.js中的generateLoaders方法，如下代码，增加publicPath: '…/…/' // generate loader string to be used with extract text plugin ...

Vue3 css实现背景图片

最新发布

05-31

### Vue 项目中 CSS 背景图片不生效的解决方案在 Vue 项目中，CSS 设置背景图片不生效的问题可能由多种原因引起。以下是几种常见的解决方案以及相关说明： #### 1. 确保路径正确在使用 `background-image` 属性时，确保图片路径正确是关键。如果图片存储在 `assets` 文件夹中，可以尝试以下方式引入图片： ```css <style scoped> .background { background-image: url('../assets/background.png'); /* 相对路径 */ background-size: cover; background-position: center; } </style> ``` 如果路径仍然有问题，可以通过 `require` 或 `import` 的方式动态加载图片[^2]： ```javascript <script> export default { data() { return { backgroundImage: require('@/assets/background.png') // 动态加载图片 }; } }; </script> <template> <div :style="{ backgroundImage: `url(${backgroundImage})` }" class="background"> </div> </template> ``` #### 2. 检查 `scoped` 样式的影响如果在组件中使用了 `scoped` 样式，可能会导致样式无法正确应用到某些元素上。例如，对于全局插入的元素（如弹窗或遮罩层），需要将样式定义为全局样式[^3]： ```html <template> <div id="global-modal"></div> </template> <style> #global-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('@/assets/modal-background.png'); /* 全局样式路径 */ background-size: cover; background-position: center; } </style> ``` #### 3. 避免 CSS 压缩问题在生产环境中，Webpack 可能会对 CSS 进行压缩或优化，这可能导致背景图片路径被错误解析。可以通过调整 Webpack 配置来解决此问题。例如，在 `vue.config.js` 中添加以下配置： ```javascript module.exports = { chainWebpack: config => { config.module .rule('images') .test(/\.(png|jpe?g|gif|svg)(\?.*)?$/) .use('url-loader') .loader('url-loader') .tap(options => Object.assign(options, { limit: 10240 })); // 设置图片大小限制 } }; ``` #### 4. 使用 `deep` 选择器如果背景图片需要作用于子组件中的某个元素，可以尝试使用深度选择器（`>>>` 或 `/deep/`）[^3]： ```css <style scoped> .parent >>> .child { background-image: url('@/assets/child-background.png'); background-size: cover; background-position: center; } </style> ``` #### 5. 确保图片资源已打包在开发环境中，图片资源可能未被正确打包。可以通过以下方式检查： - 确保图片路径以相对路径或别名（如 `@`）开头。 - 在 `public` 文件夹中放置静态资源，并通过绝对路径引用。例如，将图片放入 `public/images` 文件夹中： ```css <style> .background { background-image: url('/images/background.png'); /* 绝对路径 */ background-size: cover; background-position: center; } </style> ``` --- ### 示例代码以下是一个完整的示例，展示如何在 Vue 组件中设置背景图片： ```vue <template> <div :style="{ backgroundImage: `url(${backgroundImage})` }" class="background"> <h1>欢迎来到首页</h1> </div> </template> <script> export default { data() { return { backgroundImage: require('@/assets/background.png') // 动态加载图片 }; } }; </script> <style scoped> .background { width: 100%; height: 100vh; background-size: cover; background-position: center; display: flex; justify-content: center; align-items: center; } </style> ``` ---