vue中为什么背景图需要使用~@/assets引入

时间: 2023-04-09 18:00:27 浏览: 168

vue css 引入asstes中的图片无法显示的四种解决方法

这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是斜在Vue CLI 2.x的项目中，我们经常会遇到在CSS样式中引用assets目录下的图片，在本地开发时一切正常，但部署到线上环境时图片无法显示的问题。这主要是因为`config/index.js`文件中`build`对象的`assetsPublicPath`值被修改导致的。以下介绍四种解决方法： 1. **恢复默认值**：当`assetsPublicPath`被改为非默认值（初始为`/`）时，会导致CSS引用的图片路径错误。修复这个问题的方法是将该值改回斜杆 `/`，这样CSS背景图片路径会相对应于`dist`目录下的HTML文件。 2. **设置绝对路径**：如果不能或不想改回默认值，可以考虑使用绝对路径。例如，如果线上项目地址是`http://www.test.com`，那么将`assetsPublicPath`设置为该地址，替换原来的斜杆。CSS中的背景图片路径也会相应更新。 3. **修改CSS打包配置**：对于不想修改`assetsPublicPath`的情况，可以在`build/utils.js`中调整CSS打包配置。找到`ExtractTextPlugin.extract`，添加`publicPath: '.../...'`，确保这个层级与你的打包后的目录结构相匹配。这样，CSS打包时会根据你的配置生成正确的相对路径。 4. **优化图片引用策略**：对于新项目或图片资源不多的情况，可以改变图片引入方式。在Vue组件中，可以使用`import`导入图片，然后将其存入`data`对象，再绑定到`src`属性上。例如： ```javascript import logo from "../assets/logo.png"; data() { return { logo, }; }, <img :src="logo" width="78" height="78" alt="logo"> ``` 在CSS中，可以使用`@`符号来引用图片，`@`相当于`src`目录，例如：`background: url("@/assets/logo.png") no-repeat;` 另外，为了避免问题，还可以考虑不把图片放在`assets`目录下，直接在其他合适的位置存放，以简化路径处理。总结来说，Vue CLI项目中CSS引用assets目录图片失败主要是由于`assetsPublicPath`配置不当引起。根据实际情况，可以选择恢复默认值、设置绝对路径、修改CSS打包配置或优化图片引用策略来解决问题。在开发过程中，合理管理资源路径和配置，可以有效避免此类问题的发生。

这是因为在Vue项目中，使用相对路径引入背景图可能会出现路径错误的问题，而使用~@/assets可以确保正确引入背景图。~@表示项目根目录，@表示src目录。因此，使用~@/assets可以确保引入的背景图路径是相对于项目根目录的。

阅读全文

vue中为什么背景图需要使用~@/assets引入

相关推荐

Vue项目中设置背景图片方法

使用Vue-cli 中为单独页面设置背景图片铺满全屏

vue使用url方式使用src目录下svg图片

vue里面首页 使用css背景图片全屏铺满自适应pc页面、

vue 画板 已知背景图为：your_background_image_url: require("../../../assets/img/bxticket/1.jpg"),如何在画板上签名然后生成base64

vue登录页面背景图设置

vue svg作为背景图

vue3怎么给界面插入背景

vue-vben-admin中怎么用图片

src"../../assets/logo.png"

uniapp 引入背景图片 background-image

怎么为整个vue项目的全部页面指定背景

vue中图片资源如何走代理

在uniapp中如何添加背景图片

vue中background-image如何插入图片

uniapp canvas绘制背景图片

vue2-scale-box 插件使用

在Vue项目中，npm run build后图片等静态资源出现404错误，如何调整css-loader和Webpack配置来解决此问题？

uni navbar设置背景图

最新推荐

解决vue打包之后静态资源图片失效的问题

2000-2021年中国科技统计年鉴（分省年度）面板数据集-最新更新.zip

PPT保护工具PDFeditor专业版-精心整理.zip

高清艺术文字图标资源，PNG和ICO格式免费下载

管理建模和仿真的文件

DMA技术：绕过CPU实现高效数据传输

SGM8701电压比较器如何在低功耗电池供电系统中实现高效率运作？

mui框架HTML5应用界面组件使用示例教程

"互动学习：行动中的多样性与论文攻读经历"

【数据传输高速公路】：总线系统的深度解析

vue里面首页使用css背景图片全屏铺满自适应pc页面、

vue 画板已知背景图为：your_background_image_url: require("../../../assets/img/bxticket/1.jpg"),如何在画板上签名然后生成base64