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

最新推荐文章于 2023-06-28 14:53:35 发布
最新推荐文章于 2023-06-28 14:53:35 发布
阅读量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');
我是李大福
关注
专栏目录
vue页面和nvue页面 、引用阿里图标库-图标方法
qq_45500519的博客
07-21 528
引入阿里 字体图标
如何把本地的vue项目写的组件上传到npm
最新发布
weixin_44875212的博客
03-09 1541
平常使用Vue开发时，一个项目中多个地方需要用到的相同组件通常我们会封装为一个公共组件，但是如果项目不同我们也需要这个组件，那就需要复制一份公共组件代码到新项目，一个还好，如果是多个组件，这样就稍显麻烦了。所以我们可以将封装好的组件打包发布至npm，就可以像element ui ant-design-vue这些ui组件库一样通过npm命令下载使用了。
vue组件引入本地静态图片
chuijian2218的博客
08-08 4705
vue2组件引入本地图片的的两种方式： 1，使用@引入： 这是在组件内直接引用和普通的html方法一样，代码如下 <img src="@/assets/test.png" alt="test.png"> 2，使用vue的方法引入： 这是典型的vue思想，使用数据来操纵dom； 首...
Vue：在组件中引入静态图片
Alice_Lee_Lee的博客
07-07 349
在组件中引入静态图片
vue在组件中创建组件，子组件无法引用图片解决方法。
Jkssns的博客
07-03 297
直接引用图片就裂开了，我也裂开了。
在 vue 项目中，常用的4 种引入图片的方式
weixin_47661354的博客
06-28 9458
【代码】在 vue 项目中，常用的4 种引入图片的方式。
vue组件的写法汇总
11-27
SFC是最推荐的Vue组件编写方式，它在一个`.vue`文件中包含`template`、`script`和`style`三个部分，分别用于定义HTML结构、JavaScript逻辑和CSS样式。例如： ```vue <h1>Welcome, {{ message }} export ...
Vue注册组件命名时不能用大写的原因浅析
10-17
这说明Vue在内部处理注册和引用的过程是智能的，但最终在模板渲染时，所有的组件引用都会转换为短横线分隔命名。 最后，文档也提醒开发者，如果在开发过程中遇到任何问题，可以通过留言的方式与作者互动，作者会...
解决vue打包之后静态资源图片失效的问题
11-27
在Vue项目开发中，我们经常会遇到一个问题：当使用`npm run build`命令打包项目后，部署到服务器上时，部分静态资源，如图片，无法正常显示，浏览器控制台报404错误。这个问题主要与静态资源的存放位置及引用路径...
vue中img src 动态加载本地json的图片路径写法
10-17
总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确...
vue绑定图片格式书写
Wancc123的博客
12-15 687
// 图片 <img :src="require('@/assets/images/test.png')" /> // 背景图片 <div :style="{ 'background': 'url(' + require('@/assets/images/bg') no-repeat center center', 'background-size': '100% 100%'}">
vue组件中使用别名@引入图片 ：html css js
_____青絲
04-23 3248
通常vue中会定义一些别名比如 '@': resolve('src'), 这样在写代码时候需要引入src下的东西就可以 import Footer from '@/components/Footer.vue' 但是在style书写css以及template书写页面结构引入图片时这样就不行了，解决办法： 在 @ 前加一个 ~ 即刻，亲测有效 结构： <div class="part...
UML-组件图
无
12-29 387
概述  在UML中，使用组件图来可视化物理组件以及间的关系，并描述构其造细节。面向对象系统的物理方面建模时使用两种图一种是组件图、另一种是配置图。组件图描述了软件组件以及组件之间的关系，组件本身是代码的物理模块，组件图显示了代码的结构。 系统建模过程中建立组件图的用途： 能帮助客户理解最终的系统结构。 组件图是开发工作有一个明确的目标。 组件图有利于帮助工作组的其他人员理解系统。 使用组件图有利...
Vue项目图片引用的方法
qq_43468165的博客
03-13 2169
今天来总结一下Vue项目图片引用的方法 演示使用的是使用webpack模板创建的vue项目，目录结构是这样的： 我的图片存放在assets下的img下。 1.使用img标签应该这么引用： 在data里面定义变量test，test的值为require+（图片从src下开始的路径） <template> <div> <img class="acc" :src="test1" > </div> </template> data(){
如何优雅地在Vue页面中引入图片
zjjcchina的博客
12-13 7990
在我们写vue项目中肯定会用到各种图片，那么如何更好的使用图片资源呢。这里我讲一下我常用的方法。 错误示范 也许你的代码里常常会这样写 <template> <img :src="src"> </template> <script> export default{ data(){ return { src: require('xxx.jpg') .
Vue 组件引入 九
weixin_34280237的博客
09-30 355
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引入图片的几种方式
qq_36571836的博客
07-16 3万+
Vue引入图片的几种方式 情况1：图片在/public目录下 把图片放到与index.html同级的目录下 方式1 因为vue编译后会生成index.html，所以我们将图片与index.html放在同一目录下，相当于在index.html中使用引入图片 <!-- img标签引入图片：图片名称，这种属于相对路径，在index.html的同级目录下查找此图片 --> <img src="login-bg.png"> <!-- img标签引入图片：'/' + 图片名称，这种属于绝
Vue img 动态写入图片
一碗老面的博客
10-29 877
<imgclass="imgStyle":src="img"> this.img=require(`@/assets/img/${item.sceneName}.png`)
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、付费专栏及课程。

余额充值