vue 项目中引入图片

最新推荐文章于 2024-08-08 15:22:16 发布
最新推荐文章于 2024-08-08 15:22:16 发布
阅读量4.7k 收藏 3
点赞数 1
分类专栏： 公司工作中真实经历
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_59519449/article/details/125358023
版权

vue.js 前端 javascript

引入效果图：

背景：恍恍惚惚的整了好长时间，我借助vant-ui组件去实现的这个效果图，空状态自定义组件，这里呢！需要引入图片，考虑到图片的引入，切记，图片不可直接引入，需要间接的

1.需要在data 组件当中用require 去导入图片相对应的路径

2. 在组件里边动态导入即可!!! 切记一定要记得加冒号哈

 

一染星辰
关注
专栏目录
vue项目引入图片
seimeii的博客
04-25 878
1.html 2.data中引入 alarmImg: require("@/assets/screen/alarm.png") 3.第三种写法 let img = new Image(); img.src = require("./assets/imgs/drag.png"); 3.第四种写法 <img :src="require('@/assets/img/alarm/alarm.png')" alt="图片" /> ...
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
在Vue-cli3项目中动态引入图片时，常常会遇到图片资源无法被正确加载，浏览器显示404错误的情况。这个问题在项目中使用了动态路径来加载图片资源时尤为常见。本文将从以下几个方面深入探讨这个问题，并提供一个解决...
vue工程中加载本地资源图片
出来和你看月亮
02-23 2868
在vue工程中怎么加载本地图片 1. 静态资源的方式 public文件 创建public文件夹 '/images/a.jpg','/images/b.jpg' 2. reuqire 导入 require("../../assets/images/a.jpg"), require("../../assets/images/b.jpg"), require("../../assets/images/c.jpg"), 3. import 导入 import
Vue 3 中引入图片的方法
最新发布
码农键盘上的梦
08-08 1825
在 Vue 3 中引入图片的方式与 Vue 2 有所不同，主要是因为 Vite 的使用。通过上述方法，你可以轻松地在 Vue 3 应用中引入和使用图片资源。无论你是需要引入静态图片还是动态加载图片，都可以找到适合的方法。希望这篇文章对你有所帮助！如果你有任何疑问或需要进一步的信息，请随时提问。
vue引入本地图片
汤迷的博客
03-05 807
1、<img src="@/assets/images/test.png" alt=""> 2、<img :src="require('@/assets/images/b_doc.png')" alt=""> 3、如果把图片放在public中，则可以使用相对路径 <img src="/public/images/test.png" alt=""> ...
在vue2的data里面引用本地图片
快乐的小跳蛙的博客
03-01 1013
在vue2的data里面引用本地图片
vue创建二：引入本地图片
weixin_34191845的博客
06-25 1541
本地图片路径： 在.vue文件中引入图片adv-1.jpg List.vue代码 <img src="../../../assets/images/adv-1.jpg"> 使用js传入 <img :src="bannerImg"> export default { name: "ReportList", data () { ...
在 vue 项目中，常用的4 种引入图片的方式
weixin_47661354的博客
06-28 8876
【代码】在 vue 项目中，常用的4 种引入图片的方式。
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
08-27
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码 在 Vue 项目中引入 tinymce 富文本编辑器需要完成以下几个步骤：资源下载、初始化、扩展插件。 资源下载 首先，需要下载 tinymce 的 Vue 组件 tinymce-vue，...
vue项目引入ts步骤(小结)
10-16
在Vue项目中引入TypeScript，主要是为了利用其强大的类型检查和静态分析能力，提高代码的可维护性和稳定性。以下是详细的步骤： 1. **安装TypeScript和ts-loader** 首先，你需要通过npm或cnpm安装TypeScript和ts-...
在vue项目中引入highcharts图表的方法(详解)
08-27
在 Vue 项目中引入 Highcharts 图表的方法详解 在 Vue 项目中引入 Highcharts 图表是一种常见的需求，Highcharts 是一个功能强大且灵活的图表库，可以生成各种类型的图表，如柱状图、折线图、饼图等。下面我们将...
vue data引入本地图片的两种方式小结
10-16
今天小编就为大家分享一篇vue data引入本地图片的两种方式小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
Vue项目中设置背景图片方法
08-28
在 Vue 组件中，我们可以使用 require 函数来引入图片资源。下面是一个简单的示例代码： ``` export default { name: 'productdetailspage', data() { return { note: { backgroundImage: "url(" + require("....
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组件引入本地静态图片
chuijian2218的博客
08-08 4693
vue2组件引入本地图片的的两种方式： 1，使用@引入： 这是在组件内直接引用和普通的html方法一样，代码如下 <img src="@/assets/test.png" alt="test.png"> 2，使用vue的方法引入： 这是典型的vue思想，使用数据来操纵dom； 首...
vue 引入项目图片的几种方式
aithena的博客
06-29 1万+
1、data(){}中引入图片 { icon: require('@/assets/images/modules-a5.png'), text: '图片', type: 'ui-picture' } 或者 { icon: require('../../assets/images/modules-picture.png'), text: '图片',...
Vue中使用本地图片
草叶儿的博客
02-21 5164
这次遇到的问题是，在使用Vue的过程中，可以使用远程图片，但是，把图片下载到本地之后，就无法使用了。 我图片的下载位置是src/assets/img/a01.jpg 最后修改的结果是，把图片位置放到static/img/a01.jpg 无法显示图片的原因是原因是Vue里动态生成的路径无法被url-loader解析到 最后我的代码如下： template部分： &lt;div class="good...
vue的三种图片引入方式
嘿嘿
03-20 5906
首先给图片地址绑定变量 <template> <img :src="imgUrl"> </template> 在script中设置变量 <script> //方法1.直接将图片引入为模块 import imgUrl from "../assets/test.png" //方法2.将imgUrl放在数据里 data(){ return { imgUr...
vue中图片引入与使用几种方式
木昆灵寒酥的博客
05-14 1185
将编写代码时定义的路径转换为编译打包后的路径。
vue data中引入图片
03-29
在上面的示例中，我们在data()方法中使用require()函数来引入图片，并将其赋值给myImage属性。在模板中，我们可以通过使用v-bind指令将myImage属性绑定到img元素的src属性上，从而显示图片。需要注意的是，图片的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值