vue 引入图片

最新推荐文章于 2023-06-28 14:53:35 发布
最新推荐文章于 2023-06-28 14:53:35 发布
阅读量88 收藏
点赞数
分类专栏： vue 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaofeiweb/article/details/120194064
版权

   <img :src="item.headUrl || defaultImg" alt="">

第一种

(在data数组中保存数据的情况）

      defaultImg:require("@/views/ecrm-wx-top/assets/images/icon.png")

第二种

import icon from '@/views/ecrm-wx-top/assets/images/icon.png';

defaultImg：icon

第三种

  <img src="~@/views/ecrm-wx-top/assets/images/icon.png">

zhaofeiweb
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue的三种图片引入方式代码实例
10-15
主要介绍了vue的三种图片引入方式代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
解决vuecli3中img src 的引入问题
10-15
主要介绍了解决vuecli3中img src 的引入问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
vue的三种图片引入方式
热门推荐
编程菜鸟夜灵的日常...
04-20 17万+
/方法1.使用import将图片引入为模块，然后将其存入data中。//方法2.使用require将imgUrl放在数据里。//方法3.在生命周期函数中设置url变量。然后在script中设置变量。首先给图片地址绑定变量。
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的图片引入方式
weixin_42213025的博客
05-17 2062
html&lt;wv-swipe :height="250" :autoplay="4000" style="background: #f2f2f2"&gt; &lt;wv-swipe-item v-for="(items,index) in imgpngbox" :key="index"&gt; &lt;img :src="items.imgur
vue data引入本地图片的两种方式小结
10-16
今天小编就为大家分享一篇vue data引入本地图片的两种方式小结，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
浅谈在vue-cli3项目中解决动态引入图片img404的问题
10-15
主要介绍了浅谈在vue-cli3项目中解决动态引入图片img404的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
解决Vue动态加载本地图片问题
01-19
最近遇到了个问题，用v-bind动态绑定img的src，图片加载不出来。...//使用import引入 import img1 from './img/img1.png' import img2 from './img/img2.png' export default { data() { return { imgList
vue引入图片的方式
preserveXing的博客
06-01 9034
vue中有关图片引入的几种方式
详解Vue.js中引入图片路径的几种方式
10-16
主要介绍了Vue.js中引入图片路径的几种方式，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue css 引入asstes中的图片无法显示的四种解决方法
11-21
这里主要针对的是vuecli2中的一些问题。 vue项目中，常常会有很多的图片资源，这样的资源存放位置，通常我们有两个选择：1. static，2. assets 关于这两者之间的区别，和如何选择这里就不多说了！ 这里我们来说说assets目录下存放图片时，在vue组件的css样式中引入图片时将会遇到的一些问题！ 正常情况，我们在本地开发调试的时候，无论什么样的方式引入图片都不会有问题。但是，一大包发布打线上，就会出现图片无法加载的情况！ 这是因为，出于某些原因，有人修改了config目录下的index.js文件中的build对象中assetsPublicPath的值，这个值初始化的时候是 斜
Vue.js中的图片引用路径的方式
10-19
当我们在Vue.js项目中引用图片时，关于图片路径有以下几种情形,下面通过本文给大家分享Vue.js中的图片引用路径的方式，感兴趣的朋友一起看看吧
vue中图片的引入方式
想好了再写！
07-07 197
1.在img标签里面直接写上路径： <div> <!-- 两种写法均可 --> <img src="@/assets/imgs/0.jpg" alt="" width="150px" style="margin-right:10px;"> <img src="../assets/imgs/0.jpg" alt="" width="150px"> </div> 注释：@
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爬坑之旅(五)：vue的三种图片引入方式
帆酱的博客
11-26 1877
在vue中使用拼接图片时，会出现图片无法识别的情况 &lt;img :src="item=='seat' ? '../../statices/img/text1.png' : ' ../../statices/img/text2.png' " /&gt; 此时图片有可能无法识别，需要将图片单独引入。 首先给图片地址绑定变量 &lt;template&gt;     &lt;img :sr...
在 vue 项目中，常用的4 种引入图片的方式
最新发布
weixin_47661354的博客
06-28 6223
【代码】在 vue 项目中，常用的4 种引入图片的方式。
vue图片引入问题的解决，带你深究底层
忆林的博客
06-25 1366
首先申明这篇文章是针对采用绝对路径来加载图片的，所以接下来的底层也会是对绝对路径的一些问题进行一些解释！首先呢，要想引入一个图片，我们最基本的方式是： 其次如果我们在data()函数中定义了这个属性的话，那么就会是这样的： 然后我们现在已经知道这样两种方式都可以进行一个加载绝对路径的图片，那么我现在提出一个疑问，我们是否可以通过后端来构造这样一个可行的路径呢！然后我们在绑定在这个vue前端的src属性上；理论上来说是可行的。因为这样在v-for渲染后我们的路径会变成这样我们将它拼成这样：requir
vue 引入css
zyf13671493506的博客
03-08 85
vue css引入图片
04-18
好的，关于vue中如何引入图片，我们一般可以使用require来引入，比如： ``` ('@/assets/images/logo.png')" alt="logo"> ``` 其中，@代表的是src目录，即你可以把图片放到src/assets/images目录下，然后在...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值