vue项目组件内引用图片的写法

最新推荐文章于 2024-05-09 08:30:43 发布
最新推荐文章于 2024-05-09 08:30:43 发布
阅读量1.8k 收藏
点赞数
分类专栏： vue 样式 css/less/scss 文章标签： vue.js css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42708208/article/details/105087328
版权

直接写到img标签上

在这里插入图片描述

<img src='@/assets/img/web/settings/tx/tx1.png' alt="">

以@/assets/ 开头

在img标签上写变量

需加个require

<img :src="data.logo" width="100%" class="logo"/>

data:{
  logo: require("@/assets/logo.png")
}

效果图

background-image: url('../assets/titlePic.png');
我是李大福
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue页面和nvue页面 、引用阿里图标库-图标方法
qq_45500519的博客
07-21 477
引入阿里 字体图标
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue组件引入本地静态图片
chuijian2218的博客
08-08 4680
vue2组件引入本地图片的的两种方式： 1，使用@引入： 这是在组件内直接引用和普通的html方法一样，代码如下 <img src="@/assets/test.png" alt="test.png"> 2，使用vue的方法引入： 这是典型的vue思想，使用数据来操纵dom； 首...
Web前端最新转载：Vue引入图片的几种方式_vue2 index，IBM大面积辞退40岁+的员工
最新发布
2301_82243603的博客
05-09 348
因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片。在vue组件中定义一个变量，变量值为”使用require()方法获取的文件路径”。require()方法是将编写代码时定义的路径转换为编译打包后的路径。13，javascript 的垃圾回收机制讲一下,5，两栏布局，左边固定，右边自适应，左右不重叠。10，ES6 的 class 和构造函数的区别。3，一行水平居中，多行居左。1，判断 js 类型的方式。
Vue：在组件中引入静态图片
Alice_Lee_Lee的博客
07-07 298
在组件中引入静态图片
vue在组件中创建组件，子组件无法引用图片解决方法。
Jkssns的博客
07-03 268
直接引用图片就裂开了，我也裂开了。
vue绑定图片格式书写
Wancc123的博客
12-15 656
// 图片 <img :src="require('@/assets/images/test.png')" /> // 背景图片 <div :style="{ 'background': 'url(' + require('@/assets/images/bg') no-repeat center center', 'background-size': '100% 100%'}">
详解vue引入子组件方法
12-08
前端框架vue，在利用脚手架工具vue-cli创建前端项目时候，怎么引入组件呢...4、第四步，返回home.vue组件，引用header.vue组件代码如下图 HomeHeader 对应上一步的命名； 首先引入界面 import HomeHeader from ‘./pag
Vue函数式组件-你值得拥有
10-17
Vue函数式组件是一种轻量级的组件实现方式，它与传统的Vue组件相比有着显著的不同。在Vue中，组件通常是一个带有状态、生命周期方法和实例的类。然而，函数式组件则是一个纯函数，它不维护任何内部状态，也不执行...
如何在vue项目中嵌入jsp页面的方法(2种)
12-28
今日一个项目中一块功能模块是其他系统...创建一个server.vue组件加载jsp页面 1 、第一种（使用 v-html进行jsp 渲染） server.vue <div v-html=pageContent></div> [removed] export default { name: server,
Vue表单类的父子组件数据传递示例
08-27
Vue父子组件数据传递示例 Vue.js 是一个基于组件的开发方式，父子组件之间的数据传递是开发中的一大难题。本文将介绍 Vue 表单类的父子组件数据传递示例，主要讨论父子组件之间的数据传递方式。 一、传递基本类型...
vue组件中使用别名@引入图片 ：html css js
_____青絲
04-23 3192
通常vue中会定义一些别名比如 '@': resolve('src'), 这样在写代码时候需要引入src下的东西就可以 import Footer from '@/components/Footer.vue' 但是在style书写css以及template书写页面结构引入图片时这样就不行了，解决办法： 在 @ 前加一个 ~ 即刻，亲测有效 结构： <div class="part...
UML-组件图
无
12-29 355
概述  在UML中，使用组件图来可视化物理组件以及间的关系，并描述构其造细节。面向对象系统的物理方面建模时使用两种图一种是组件图、另一种是配置图。组件图描述了软件组件以及组件之间的关系，组件本身是代码的物理模块，组件图显示了代码的结构。 系统建模过程中建立组件图的用途： 能帮助客户理解最终的系统结构。 组件图是开发工作有一个明确的目标。 组件图有利于帮助工作组的其他人员理解系统。 使用组件图有利...
如何优雅地在Vue页面中引入图片
zjjcchina的博客
12-13 7379
在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范 也许你的代码里常常会这样写 <template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xxx.jpg') .
Vue 组件引入 九
weixin_34280237的博客
09-30 324
2019独角兽企业重金招聘Python工程师标准>>> ...
vue中本地静态图片的路径应该如何写
热门推荐
开心大表哥
03-06 6万+
需求：如何components里面的index.vue怎样能把assets里面的图片拿出来。 1.在img标签里面直接写上路径： &lt;img src="../assets/a1.png" class="" width="100%"/&gt; 2.利用数组保存再循环输出： &lt;el-carousel-item v-for="item in carouselData" :k...
Vue img 动态写入图片
一碗老面的博客
10-29 859
<imgclass="imgStyle":src="img"> this.img=require(`@/assets/img/${item.sceneName}.png`)
vue样式 引入图片_vue怎么插入图片？
weixin_29522547的博客
12-31 4769
vue怎么插入图片？下面本篇文章给大家介绍一下在vue中插入图片的几种方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。vue怎么插入图片？首先给图片地址绑定变量 在script中设置变量//方法1.直接将图片引入为模块require imgUrl from "../assets/test.png"//方法2.将imgUrl放在数据里data(){return {imgU...
vue上传图片组件编写
fairyier
07-27 1742
点击打开源码 https://github.com/317482454/vue_upload 编写一个vue上传图片组件： 1.首先得有一个[type=file]文件标签并且隐藏，changge事件来获取图片： [javascript] view plain copy   "fileChange($event)" type="file"
vue3 引入组件的写法
05-17
在Vue3中引入组件有两种方式： ... ... ``` import { createApp } from 'vue' ...在上面的例子中，我们将`HelloWorld`组件局部注册为`hello-world`，只能在当前组件内使用`<hello-world></hello-world>`标签来引用该组件。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值