问题杂记-Vue组件中使用地址引入图片

最新推荐文章于 2024-08-08 15:22:16 发布
最新推荐文章于 2024-08-08 15:22:16 发布
阅读量5.4k 收藏 3
点赞数 1
分类专栏： # Vue-js 前端 # 样式Css 个人总结 文章标签： 图片 background vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a8725585/article/details/79647083
版权
前端 同时被 3 个专栏收录
45 篇文章 0 订阅
订阅专栏
个人总结
31 篇文章 0 订阅
订阅专栏
Vue-js
23 篇文章 1 订阅
订阅专栏

一般我们在html 和css文件中需要用到图片时直接使用相对路径即可。如<img src="@/img/img1.png"/>  background="url(@/img/img1.png)"但在vue中style中这样使用会出错，找不到文件。

template模板中既可以使用相对路径，也可以使用别名@ style中可以使用相对路径 不能使用webpack中配置的路径别名

解决方法：

1.使用相对路径../../img/img1.png

2.在路径前加~,该方法在template中同样适用即 ~@/img/img1.png;不加的话会将其解析为./@/img/img1.png就没有@文件夹

可乐少点冰
关注
专栏目录
vue中使用 unplugin-vue-components 插件来自动引入组件样式，则无法正确识别 Toast 组件，因此需要手动引入 Toast 组件的样式：
The_Lucky_one的博客
09-09 2108
vue中使用 unplugin-vue-components 插件来自动引入组件样式，则无法正确识别 Toast 组件，因此需要手动引入 Toast 组件的样式：
vue-在组件中使用v-model
小陈的博客
08-23 1万+
当我们使用。
vue在组件中创建组件，子组件无法引用图片解决方法。
Jkssns的博客
07-03 289
直接引用图片就裂开了，我也裂开了。
vue 组件中图片地址，图片获取
cvper's world !
05-05 5669
前提：在组件中使用引用图片，用于&lt;img src&gt;  或者  背景图片background;当我们利用vue-cli 搭建好项目的框架，开始高高兴兴开发组件的时候，有的时候想加一张图片，或者在样式中加个背景，会发现，图片引用不进来，这可愁坏了不是；组件中引用图片用于 &lt;img src="???"&gt;使用图片之前，我们可以这么做，在组件的script 中引入图片，下面示例引入一...
Vue 3 中引入图片的方法
最新发布
码农键盘上的梦
08-08 2072
在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。
Vue的图片路径
DeliaWen的博客
09-14 548
img 相对路径: <img src="../../assets/img/home-logo.png" alt=""> 绝对路径: <img src="@/assets/img/home-logo.png" alt=""> import 引入 import qrCodeUrl from "@/assets/img/home-logo.png"; data(){ return { qrCodeUrl: qrCodeUrl } } <img :src="qrCodeUrl" alt
简化文件、图片路径的方法，也就是vue中关于 '@/' 、 '~@/' 代表的含义
weixin_44514665的博客
06-05 6845
使用背景 在vue的项目中需要使用到 某一个路径的图片，但是用相对路径和绝对路径书写起来都会是很长的路径 例如： ./../../../static/img/my/icon4.png 甚至更长 这种情况下，想要我们的路径书写简短一点 就可以使用 ‘@/’ 、 ‘~@/’ 来表示前面部分的路径 ‘@/’ 也是相对路径 和 ‘./’ 意思差不多，具体表示什么路径需要看具体的@ 如何配置 首先需要现...
vue require 图片动态地址_绝对干货~！学会这些Vue小技巧，可以早点下班和女神约会了
weixin_39620151的博客
11-25 188
夏眠不觉晓，处处蚊子咬，夜来键盘声，发落知多少？每天都在代码，虽然手底下马不停蹄的敲，但是该来的加班还是会来的，如何能更快的完成手头的工作，提高自已的开发效率，今天小编给大家带来了这几个Vue小技巧，终于可以在六点像小鹿一样奔跑着下班了。先赞后看，艳遇不断，哈哈哈哈~学会使用 $attrs 与 $listeners，二次包装组件就靠它了：前几天产品经理给我甩过来一份管理系统的设计原型，我打开看了看...
如何在vue项目中使用图片路径
小方块的世界
04-20 3059
问题描述 在img标签中如何引入图片路径 如何动态修改图片地址 在background属性中如何引入图片地址 问题解决 图片目录 - src -- assets --- images 在img标签中直接使用图片 <img src="@/assets/image/banner.png"> 动态改变img标签的地址，比如轮播图： <img :src="imgList[activeIndex]"> getImgList() { let arr = []
使用babel-plugin-import按需加载ant-design-vue组件
weixin_43846709的博客
03-14 1752
babel-plugin-import按需加载组件
【tinymce-vue】tinymce-vue自定义图片上传插件，且在插件中调用vue组件
零信号的博客
04-29 3449
最近工作项目需要基于tinymce-vue进行插件开发，需要自己写一个插入图片/视频/链接的插件，虽然说tinymce自带就有这些插件，但是这些插件的UI界面长得不是很美观，所以大佬说要自定义tinymce的这些插件。现在就基于tinymce-vue自定义图片上传的插件，来记录一下吧。 先讲一个这个关于图片上传的需求： 在点击菜单栏的插入图片，要弹出一个我们自定义的vue组件 点击图片上传后要将...
ant-design-vue使用之路
qq_39692513的博客
12-21 2万+
目录引入ant-design-vue1.全局引入2. 局部引入局部引入组件局部引入图标使用1message的使用2 日期范围组件本地化3组件化的小技巧listform优化webpack分析插件优化强依赖插件moment 引入ant-design-vue 1.全局引入 1. 命令行使用npm安装 npm install ant-design-vue --save 2. main.ts文件中导入 import Antd from 'ant-design-vue'; import 'ant-design-vu
vue中prop的用法
风如也的博客
07-23 2万+
prop的大小写 HTML 中的 attribute 名是大小写不敏感的，所以浏览器会把所有大写字符解释为小写字符。这意味着当你使用 DOM 中的模板时，camelCase（驼峰命名法）的 prop 名需要使用其等价的 kebab-case（短横线分隔命名）。如果使用字符串模板，这个限制就不存在了。 prop类型 我们常见的 prop 是以字符串数组形式列出的 prop props: ['title', 'likes', 'isActived'] 但是，通常你也希望每个 prop 都有指定的值类型，这个时
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前面多了/
Vue中img动态绑定图片的地址
海阔天空
04-08 6484
Vue中img动态绑定图片的地址
vue 项目 下载图片地址 和图片名称
酱子
09-16 810
vue 项目 下载图片地址 和图片名称 引入：import { downloadImage } from '@/utils/downloadImg' 使用：downloadImage(imgurl, imgname) export const downloadImage = (imgsrc, name) => { // 下载图片地址和图片名 var image = new Image() image.setAttribute('crossOrigin', 'anonymous') ima
vue的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
vue中的img路径
03-30 1万+
目录 一、引入public中的img 二、引入assets中的img 三、通过require()函数动态引入路径 四、css中background属性通过url()函数引入路径 五、css中background属性通过url()函数 动态 引入路径 六、通过组件动态引入路径 七、组件引入public中的路径 八、组件引入外部图片链接 推荐<el-image>组件，其详细介绍见：https://element.eleme.cn/#/zh-CN/component/image 一
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值