vue 在css 引入背景图background: url（艾特assets/img/bg.png) 报错

最新推荐文章于 2024-06-19 14:56:19 发布
最新推荐文章于 2024-06-19 14:56:19 发布
阅读量1.1w 收藏 8
点赞数 12
分类专栏： 前端相关 vue JavaScript 文章标签： vue 背景图 css css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42557996/article/details/106667593
版权
前端相关 同时被 3 个专栏收录
28 篇文章 2 订阅
订阅专栏
JavaScript
25 篇文章 1 订阅
订阅专栏
vue
18 篇文章 0 订阅
订阅专栏

vue 在css 引入背景图
background: url(@assets/img/bg.png) 报错：
Cannot find module ‘./@assets/img/bg.png’

解决办法：
把background: url(@assets/img/bg.png) 改为
background: url(~@assets/img/bg.png)

南极一块修炼千年的大冰块
关注
  • 12
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
Vite css 无法加载背景图片
Hfuns
07-30 931
Vite css文件中背景图无法访问，后缀css修改为scss。
解决vue打包css文件中背景图片的路径问题
12-12
vue-cli写完的静态页面我们在node环境中引入没有问题，但是打包后放在Apache环境下，路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: 235px; background: url(../img/welcome.jpg) 0 0 no-repeat; 但是打包后路径成了却出现404访问不到的问题。 解决的办法很简单 build路径下utils.js文件 // Extract CSS when that option is specified // (which is the case during production bu
VUE3中SCSS引入背景图片的方式
phplife的电子商务网上商城专栏
04-15 1万+
在VUE3的组件中写样式时会需要用到css的背景图片，这时背景图片怎么引入呢？一般有两种方式： 一、相当路径引： background: url("./../assets/img/test.png") no-repeat; 二、绝对路径 background: url("~@/assets/img/test.png") no-repeat; ...
vue，background-image: url()时候报错。
最新发布
m0_47555838的博客
06-19 181
@的意思： @是webpack设置的路径名，代表的是src目录，可以在build / webpack.base.conf.js更改设置。~@ 前面记得加~。
vue项目使用background-image设置背景图报错的解决
bbt953的博客
02-17 5528
background-image: url("@/assets/images/loginbg.png"); // 会报图片路径不对的错误,因为vue2.5及以下版本这种写法没问题;vue2.6及以上版本,用的是webpack4.0就会导致这种错误，需要换一种写法: background-image: url("~@/assets/images/loginbg.png"); // 带~的路径会被webpack解析为require(src/assets/images/loginbg.png) ...
引入背景图时候，路径写入@会报错
Bonusnoon的博客
06-15 431
引入背景图时候，路径写入@会报错
vue 导入图片方法（简单易用）
u012914342的博客
05-31 2459
1.直接在标签内添加： :style="'background-image:url('+require('../../assets/bg.png')+')'" 2.css穿透 div >>> .imgSrc { background-image: url('~@/assets/bg.png') }
vue component 中引入less文件报错 Module build failed
12-10
错误是这样发生的： //在vue component组件中引入less文件 <style lang="less">...Can't resolve './@/assets/css/public/layout.less' in 'D:\mt\src\layout' in D:\mt\src\layout\default.vue (line
解决Vue2.0中使用less给元素添加背景图片出现的问题
11-30
1. `background-image: url('../img/' + @{bg_url} + '2x.png');` 2. `background-image: url('../img/' + @bg_url + '2x.png');` 3. `background-image: url(../img/@{bg_url}2x.png);` 4. `background-image: url...
用Vue-cli搭建的项目中引入css报错的原因分析
08-29
但是，在main.js中引入css文件或在其他文件中引入css文件都可能会报错。 报错原因 报错的原因主要是因为Vue-cli在编译css文件时，需要在webpack.base.conf.js文件中配置对应的loader。我在研究Vue的过程中，遇到了...
scss background: url（）路径无效问题
jack_rose_me的博客
04-08 4684
@import "../style/lines.scss" 导致background: url（）路径无效问题 解决方案是在webpack中的vue.config.js中配置 configureWebpack: config => { let obj = {}; obj.resolve = { alias: { 'img': '@/assets/img', } }; return obj } 然后在lines.scss中...
样式错误---记录一些bug
WBSRYA的博客
01-13 271
background:url() 不显示--pc 1. background:url('~@/assets/img.png') 不显示 2. background:url("../../assets/img.png") 也不显示 3. background:url('./../../assets/img.png') 可以显示 如果以上三种还不显示，在第三种的情况下加上background-size:100% 100%; 目前不知道什么原理，但是成功显示了 ...
vue 页面跳转404_出现404页面怎么办？应该如何处理404页面？
weixin_39628063的博客
10-22 1809
当出现404页面怎么办？应该如何处理404页面？我们都知道404页面是用户在输入错误的链接时，显示的返回页面，但是作为SEOer来说，一切与用户有关的事，我们都不能忽略， 当用户已经点击进来，难道要因为出现的404页面而失去众多用户吗？不！这不是一个优秀的SEOer该做的事，下面大吼吼来讲一下出现404页面该如何做？ 首先我们先来说一下404页面出现错误的原因：无非就是以下三种 ...
前端JS请求接口图片时报错 GET https://xxx.png 404(Not Found)
lrx276的博客
09-19 1221
在前端开发中，偶尔会出现下面这种情况：从接口中请求图片请求不到，如果请求方式是对的，那就是因为请求失败或者说不存在，这时候不要慌张，可以直接在img中添加onerror事件。可又有人问了，这个事件要怎么用呢？怎么添加呢？方法也是极其的简单真的就是只需要在img中添加onerror=“命名（event）”然后在函数中直接e.target.src = “想要修改的图片路径”就可以啦。
Vue引用图片（require引用和设置background）
qq_40137978的博客
05-10 2748
require图片 let menuPath = "assets/img/menu.png"; //重新拼接 require(`@/${图片变量路径}`) <img class="menu" :src="require(`@/${menuPath}`)" /> 需要加require 设置backgroundImage <img :src="require('assets/img/button.png')"> <div :style="{backgroundIma
vue引入图片路径的三种主要方法
我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。
03-16 2万+
1、在js代码里面 或者 html里面用"v-bind:"或":属性名"绑定路径的时候使用2、在css或者scss或者html里面的src中引入图片使用（注意如果是:src=后面用第1种方式引入路径）3、正常引入静态图片路径情况一，在html里面的用下面代码情况二，在scss里面的background-image:url(路径)用下面的，注意static前面多了/
微信小程序css篇----背景（Background）与颜色（Color）
鎏嫣宫守护的博客
12-30 14万+
一。背景：background。设置对象的背景特性。一个元素可以设置多重背景图像，每组之间用逗号隔开，如果存在重叠关系，前面的背景图像会覆盖在后面背景图上。 1.background-color：指定背景的颜色。取值：正常的颜色取值。 2.background-image：背景图片。 如果设置了这个属性，最好也添加下background-color ，用于当背景image不可见时保持与文
background-image:url();url中怎么写；以及区分background属性；
热门推荐
rmkloveme
10-26 14万+
background-image:用于设置需要显示背景图片；  例如-->background-image:url(demo.jpg); 大家知道ulr()中是填写路径：（现在假设背景图片名字叫做demo.jpg） 1、如果该css文件和背景图片在同一文件夹存在且并不包含于其他文件夹 那么直接填写demo.jpg； -->background-image:ur
vue 画板 已知背景图为：your_background_image_url: require("../../../assets/img/bxticket/1.jpg"),如何在画板上签名然后生成base64
09-11
你可以使用 Vue.js 和 HTML5 Canvas 来实现画板功能，并将签名转换为 base64。下面是一个简单的示例代码： 1. 首先，确保你已经安装了 Vue.js 和相关依赖。 2. 在你的 Vue 组件中，引入 `html2canvas` 库来将 Canvas 转换为 base64 图片。你可以使用下面的命令来安装该库： ``` npm install html2canvas ``` 3. 在组件中，你可以定义一个 Canvas 元素，以及一些相关的方法和变量。在模板中，你可以使用 `v-on:mouseup` 事件监听鼠标抬起的动作，并调用相应的方法来生成签名的 base64 图片。 ```html <template> <div> <canvas ref="canvas" @mouseup="saveSignature"></canvas> </div> </template> <script> import html2canvas from 'html2canvas'; export default { data() { return { context: null }; }, mounted() { this.context = this.$refs.canvas.getContext('2d'); this.drawBackground(); }, methods: { drawBackground() { const img = new Image(); img.src = require("../../../assets/img/bxticket/1.jpg"); img.onload = () => { this.context.drawImage(img, 0, 0); }; }, saveSignature() { html2canvas(this.$refs.canvas) .then(canvas => { const dataURL = canvas.toDataURL(); console.log(dataURL); // 这里可以将 base64 数据用于后续操作 }); } } }; </script> ``` 这个示例代码中，首先在 `mounted` 钩子函数中获取 Canvas 的上下文。然后，使用 `drawBackground` 方法将背景图绘制到 Canvas 上。 在模板中，当鼠标抬起时触发 `saveSignature` 方法。该方法使用 `html2canvas` 函数将 Canvas 转换为 base64 图片，并将结果打印到控制台。你可以根据你的需求，将 base64 数据用于后续操作。 注意：为了使 `require` 函数正确加载背景图，你需要根据你的项目配置进行相应的调整。 希望这个示例对你有帮助！如果有任何问题，请随时提问。
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值