Vue 的Style中background的URl地址build 后找不到图片地址

最新推荐文章于 2024-06-25 10:20:33 发布
最新推荐文章于 2024-06-25 10:20:33 发布
阅读量4.2k 收藏 1
点赞数
分类专栏： vue 前端 文章标签： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u013750989/article/details/82885604
版权

vue中的style标签中的background background-image 的路径应该怎么写才能正确的打包出来

Vue 的Style中background background-image 的URl地址build 后找不到图片地址：

1、仅需：在build/utils.js文件夹中添加  publicPath:'./../../'

如下图所示，根据自己创建的Vue project来确定‘../’需要几级

 

 

2、参考其他人资料需要在其他配置文件中修改其他属性，亲测无需修改这些配置文件

如：config/index.js文件下 我的配置

 

、

香草色的青春
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue 动态设置img的src地址无效,npm run build 后找不到文件的解决
11-20
npm run build 后出现 xxxxxxx net::ERR_FILE_NOT_FOUND 解决办法： 进入：build文件夹 > 打开 webpack.prod.conf.js 找到：output 对象 添加：publicPath：‘./’ 具体写法： publicPath: process.env.NODE_ENV =...
动态style中backgroundImage的url无法显示问题
weixin_44070450的博客
12-08 7346
组件背景采用图片上传后，返回图片路径，更新前端数据，重新渲染页面。 因动态样式style的背景图是由js采用ES6模板字符串拼接而来，无法显示背景，如下: // this.host:服务器地址 ， imgUrl：图片路径 style.backgroundImage=`url(${this.host+imgUrl})` 当该参数当成 ing 的 src 路径时是可以查看到图片的 <img :src="`${host + imgUrl}`"/> 查看多个上传图片，发现查...
WEB开发基础篇 ---- CSS的基础（二）
weixin_45040301的博客
01-20 435
此篇文章为基础的HTML学习，暂未涉及HTML5的知识点，为本人学习时的笔记记录，同时也适合初学者学习。喜欢的友友可以关注一下，后续会补充JavaScript，TypeScript，vue2.0，vue3.0以及uni框架等等一系列的前端学习文章。（强者不喜请绕道，本人内心脆弱，勿喷） 今天组长在开会，修复了项目bug又来摸鱼，继续更新一下CSS的基础知识吧???? 1. CSS的元素显示模式 之前我们有说过某一些元素是块级元素，某些元素是行内元素等等的话，当时刚接触只是大概的讲了一下，现在这个章节我
Vue 关于如何使用 background-image 属性（真的很详细）
最新发布
(黎子)人生编码
06-25 2614
属性用于设置元素的背景图像。它可以接受一个或多个图像的 URL，以及相关的背景定位、重复、大小和附着方式等属性。
vue的style绑定background-image url 写法 简单易懂
IT13333的博客
06-29 3816
vue的style绑定background-image url 写法
CSS【background+url路径写法（同一路径或不同路径）】
随便写写
07-07 1万+
CSS 背景属性用于定义HTML元素的背景。CSS 属性定义背景效果:background-color 属性定义了元素的背景颜色.页面的背景颜色使用在body的选择器中: background-image 属性描述了元素的背景图像.默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.尽量把图片放置在与.html文件同一目录下【我自己在写background-image的时候，把网页文件和图片放到两个不同文件夹中，需要加../同一级/图片】默认情况下 background-image
Vue2.x background:url()踩坑
WF帆少的博客
07-24 1万+
开发模式下vue中background: url(‘../../assets/img/xxxxx’)直接写在行间样式不生效，即不能直接在标签中style属性中写， 必须写在非行间样式才会生效
Vue 中对图片地址进行拼接的方法
12-09
我们想要将它转化为正常的图片地址，需要使用for循环来将图片拼接起来 getSingList(){ getSingerList().then((res) =>{ if (res.code==ERR_ok){ this.singers=res.data.list console.log(this.singers) for...
vue 内联样式style中的background用法说明
10-14
在这个例子中，`item.img`是包含图片URL的数据，通过`+`运算符将其与字符串`url(`和`)`拼接起来，形成有效的CSS `background-image`属性值。注意，Vue语法要求在内联样式中使用花括号包裹对象，并且URL值需用引号括...
解决vue项目 build之后资源文件找不到的问题
10-14
在Vue项目开发过程中，我们经常会遇到这样一个问题：在完成项目的构建（build）后，静态资源文件，如图片、CSS或JavaScript文件无法正常加载，导致页面显示异常或功能失效。这通常与Vue的构建配置和资源路径有关。...
style background变量vue
u013994400的博客
12-01 2744
style的baclground 变量
html里style=“background:url()改成thymeleaf
qq_43881663的博客
04-16 2237
原本html里：thymeleaf里 <li style="background:url('/user/images/banner03.jpg') 50% 0 no-repeat;'></li> thymeleaf里改成这样结果不行 <li th:style="'background:url('/user/images/banner03.jpg') 50% 0 no-repeat;'"></li> 改成这样就可以了 <li th:style="'ba
vue的style绑定background-image url 写法
腾讯全栈-ITCJF
09-05 1万+
.login-container { background: url(‘~@/assets/login_images/login_background.png’);
行内样式background: (url: `${imgurl}`)不生效
m0_70542915的博客
10-31 4058
大屏项目中按钮需要使用服务器中的图片做背景，并且图片是一个svg格式，因svg图片中preserveAspectRatio属性导致图片不能自由伸缩，不能用backgroundSize调整完全占满整个按钮，所以添加了preserveAspectRatio(none)不去固定图片的宽高比。浏览器f12审查标签样式，发现生效的样式中background的url中加了两个转义字符。如果代码中找不到原因，就在成功渲染出来的页面去审查一下成功与失败的区别，办法总比问题多。
HTML小白入门基础_6
weixin_52612800的博客
05-11 539
写在前面 正文 第一个是实现这样一种效果，将一个标签放在左边，将另一个标签放在上一个标签的剩余部分，比如实现下面这种效果。 <style> .left{ background-color:red; width:40%; float:left; } .right{ background-color:blue; width:50%; float:right; } </style> <h2 class="left">我左边有空</h2> <
(r“““＜div style=“background: url(‘(.*?)‘) no-repeat； background-size: auto 100%；“/＞“““
qq_55663631的博客
08-19 362
<divstyle="background:url('//cdnimg01.kurogame.com/M00/1A/80/ChpCl2EBM7iEDAu3AAAAAGIgNAU818.jpg') no-repeat; background-size: auto 100%;"/> 当用pyquery爬取图片时，有时候会遇到上面这样，没有直接说明长度宽度，而且url也不好直接拿出来。 这时可以用正则表达式re 的findall把上面用迭代器得到的url里 需要的字符串提取出来。 ...
Html+CSS 学习第二天
七夜的博客
03-08 682
Html+CSS 学习第二天
如何在vue3中正确的引入background:url
u010782109的博客
10-10 2514
第二加入“~”波浪号。第一必须加上双引号。
Vue项目中background-image属性设置方法
热门推荐
彭世瑜的博客
04-07 2万+
vue项目中background-image属性设置方法 方式一：直接访问 在vue-cli项目中的放在public目录下的资源会被直接复制，不会经过webpack的打包处理。 <span class="item-icon"></span> <style> .item-icon { width: 20px; height: 20px; background-size: 20px 20px; vertical-align: middle; /* 放置
vue可以将图片上传到oss但url地址传不到后端
05-19
如果您使用 Vue.js 将图片上传到 OSS，但是无法将 URL 地址传递到后端，可能有以下几个原因： 1. 上传成功后，您没有将 OSS 返回的 URL 地址保存到后端。您需要将 URL 地址传递给后端并在后端进行处理。 2. 您在上...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值