首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

src属性绑定在angular6中不起作用

在Angular 6中,src属性绑定用于指定元素的源文件路径。它常用于图片、音频、视频等多媒体资源的加载。但是,如果在Angular 6中绑定src属性不起作用,可能是由于以下几个原因导致的。

  1. 路径错误:请确保src属性所指定的路径是正确的,并且能够正确访问到资源。可以使用相对路径或绝对路径来指定资源的位置。
  2. Angular表达式错误:在模板中使用src属性绑定时,需要确保表达式的正确性。请检查你是否正确地使用了插值语法或属性绑定语法来绑定src属性。例如,正确的插值语法是{{expression}},正确的属性绑定语法是[src]="expression"
  3. 路由模块配置问题:如果你使用了路由模块,并且尝试在组件模板中绑定src属性,可能需要在路由模块中配置对应的路径。请确保在路由模块的@NgModule装饰器中正确配置了路径,以确保可以正确访问到资源。

如果以上方法都没有解决问题,你可以尝试以下操作:

  • 检查浏览器控制台:打开浏览器开发者工具,查看控制台输出,看是否有任何错误信息提示。
  • 检查网络请求:使用浏览器开发者工具的网络面板,查看src属性对应资源的网络请求是否成功,是否返回了正确的响应。
  • 检查Angular版本:确保你的Angular版本是6或以上版本,并且已经正确安装和配置。

如果你需要在腾讯云上部署和托管Angular应用,腾讯云提供了多种相关产品,包括云服务器、云函数、容器服务等,可以根据你的需求选择适合的产品。你可以访问腾讯云官方网站了解更多详情和产品介绍:腾讯云官方网站

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

PHP 正则表达式 获取富文本的 img标签的src属性

前言 鄙人发现对于微信看看中的文章,一般都会有三张摘要图片; 所以想着可以直接提取富文本的 标签的 src 属性信息; 这样就可以在前台的 文章列表展示三张图片(建议不要多了),吸引阅读...:\>|\/>)/i' 然后再循环匹配出 src 属性信息:'/\bsrc\b\s*=\s*['\"]?([^'\"]*)['\"]?/i' 既便于理解,又不影响效果!!...注意匹配的结尾形式 ([^\'\"]*) 匹配不上单引号和双引号的字符 整理后的处理源码如下: /** * 对富文本信息的数据 * 匹配出所有的 标签的 src属性 * @param...src属性信息 $pattern_src = '/\bsrc\b\s*=\s*[\'\"]?...参考文章 ------ 如何通过正则表达式获取img标签的src属性 ------ PHP正则表达式,看这一篇就够啦! ②. 推荐学习—— 正则表达式 - 匹配规则

6.7K10
  • React--Component组件浅析

    对于类组件的执行,是在react-reconciler/src/ReactFiberClassComponent.js:function constructClassInstance( workInProgress...> console.log(222) /* 方法: 绑定在 Index 原型链的 方法*/上面把类组件的主要组成部分都展示给大家了。...因为在 class 类内部,箭头函数是直接绑定在实例对象上的,而第二个 handleClick 是绑定在 prototype 原型链上的,它们的优先级是:实例对象上方法属性 > 原型链对象上方法属性。...需要手动绑定和解。对于小型项目还好,但是对于中大型项目,这种方式的组件通信,会造成牵一发动全身的影响,而且后期难以维护,组件之间的状态也是未知的。一定程度上违背了 React 数据流向原则。...因为 React 类组件,有良好的继承属性,所以可以针对一些基础组件,首先实现一部分基础功能,再针对项目要求进行有方向的改造、强化、添加额外功能。

    30040

    每日一学vue2:自定义绑定事件解除方式($off)及销毁vc

    自定义事件的解 运用$off这个api来实现 1.解一个自定义事件时 举例: StudentLqj.vue: <button...$emit('demo')         注意:如果我们相同时解除绑定这两个(或者你可以再写的多一些自定义绑定事件,道理都是一样的),         需要借助子组件(StudentLqj.vue)的...$off()是解默认的所有自定义事件的值         列表:        this.off('xxx')解除一个xxx自定义绑定事件         this.off(['xxx','yyy']...)解除xxx和yyy自定义绑定事件         this. 3.组件实例对象(vc)销毁 如果一个组件的的实例对象(vc)被销毁了,那它身上的组件自定义组件也就跟着不起作用了!... 如果点击销毁当前子组件的按钮,不需要点击解的按钮,自定义绑定事件则不起作用,         因为子组件的vc都没有了! 只要路飞还在笑,我的生活没烦恼!

    3.2K20

    Cinemachine初体验

    步骤: 在timeline能够用到的是红框的两种相机。...1、Visual Camera: (ps:如果不使用timeline,priority属性高的虚拟相机会被优先启用,所以在调整相机视角时需要点击solo按钮激活当前要调整的虚拟相机) Follow属性和...body属性(follow是指相机要跟随的物体,body里选择虚拟相机跟随物体的跟随算法): LookAt属性和Aim属性(类似follow和body): Lens Vertical FOV...绑定操作可以参考: timeline的动态绑定 cinemachine的动态绑定 在第二篇文章博主说有两种法 在第二种法中用到了 PlayableDirector.playableGraph.GetResolver...这里要注意playableGraph是只有在PlayableDirector处于播放状态时才会存在(参见unity 论坛) 第二种方法的SetResolver没找到太多相关资料,赋值一直不起作用

    62310

    【Java 进阶篇】JQuery 事件绑定:`on` 与 `off` 的奇妙舞曲

    这样,只有在特定命名空间下绑定的事件才会被解,不影响其他事件。 事件数据传递 有时候我们需要在触发事件时传递一些额外的数据。on 方法允许我们通过事件对象的 data 属性来实现这一目的。 <!...在回调函数,我们通过 event.data.message 获取到了这条消息并弹出提示框。 off:解的魔法师 off 方法是 on 的搭档,它用于解一个或多个事件处理函数。...在上面的例子,我们已经见识过 off 的简单用法,下面让我们更深入地了解它的各种姿势。 解指定事件类型 off 方法可以根据事件类型来解事件。...(); }, 3000); 在这个例子,我们使用 off 方法解了所有类型的事件。...然后,通过 off 方法解了点击事件的 clickHandler。这样,只有悬停事件仍然会触发 hoverHandler 回调函数。

    18330

    深入学习 React 合成事件

    在legacyListenToEvent函数首先通过获取document节点上监听的事件名称Map对象,然后去通过绑定在jsx上的事件名称,例如onClick来获取到真实的事件名称,例如click,依次进行...事件都是绑定在document上的。 jsx的事件名称会经过处理,处理后的事件名称才会被绑定,例如onClick会使用click这个名称来绑定。...事件解 通常我们写事件绑定的时候会在页面卸载的时候进行事件的解,但是在React,框架本身由于只会在document上进行每种事件最多一次的绑定,所以并不会进行事件的解。...在 React 16 及更早版本,使用者必须调用 e.persist() 才能正确的使用该事件,或者正确读取需要的属性。 对标浏览器 onScroll 事件不再冒泡,以防止出现常见的混淆。...在线demo地址:https://codesandbox.io/s/v16fixevent2-4e2b5 React17版本修复方法 在17版本React事件并不会绑定在document上,所以并不需要修改任何代码

    1.1K31

    组件库源码这些写法你掌握了吗?

    ,用来将指令和元素解时调用,类似vue生命周期中的beforeDestroy钩子函数 } }); 复制代码 1.1 v-clickoutside ❝ v-clickoutside是Element-ui...,更多源码详情看链接 element/src/utils/clickoutside.js ❞ ?...通过自增的临时变量 id来标识该 clickoutside 指令 update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx的值,方便组件更新时做变更 unbind:当需要将指令和元素el...解时,通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 存储的当前解元素 el,将它从nodeList删除 下图是一个bind的结果 ?...同时引入mixin的组件,mixin的方法和属性也就并入到该组件,可以直接使用。钩子函数也将会在两个都被调用(Mixin的钩子会先执行) ❞ ? ?

    1.6K40

    组件库源码这些写法你掌握了吗?

    binding, vnode) { # 绑定Vue编译生成的虚拟节点VNode 更新时调用 }, unbind: function(el, binding, vnode) { # 解操作...Dropdown下拉菜单、Popover 弹出框等组件中都用到了该指令 ❞ element的实现 ❝ element的 clickoutside 的具体实现,如下 更多源码详情看链接 element/src...通过自增的临时变量 id来标识该 clickoutside 指令 update: 其实本质上就是用来更新初始化我们定义绑定在el的ctx的值,方便组件更新时做变更 unbind:当需要将指令和元素el...解时,通过遍历原先的“元素管理器“ - nodeList 的长度和结合上文提到的id找到 nodeList 存储的当前解元素 el,将它从nodeList删除 下图是一个bind的结果 ❝ ?...同时引入mixin的组件,mixin的方法和属性也就并入到该组件,可以直接使用。

    1.1K21

    React 进阶 - Component 组件

    React 对组件的处理流程: 对于类组件的执行,是在 react-reconciler/src/ReactFiberClassComponent.js function constructClassInstance...*/ handleClick= () => console.log(111) /* 方法: 箭头函数方法直接绑定在this实例上 */ componentDidMount(){...()=> console.log(222) /* 方法: 绑定在 Index 原型链的 方法*/ # 函数组件 React V16.8 hooks 问世以来,对函数组件的功能加以强化,可以在 function...但是很多地方还是不推荐使用,因为其有一些缺点: 需要手动绑定和解事件,容易出错 对于小型项目还好,对于中大型项目,这种方式的组件通信会造成牵一发动全身的影响,后期难以维护,并且组件之间的状态也是未知的...在一定程度上违背了 React 的单向数据流的设计思想 # 组件强化方式 # 类组件继承 因为 React 类组件,有良好的继承属性,所以可以针对一些基础组件,首先实现一部分基础功能,再针对项目要求进行有方向的改造

    45510

    Redis变慢了,到底慢在哪儿?(2)

    简称"核" 要让一个Redis总是绑定在一个CPU物理核上,我们通常使用taskset命令来实现,例如下面的方法,就可以把Redis服务绑定在核心编号为1的CPU上: taskset -c...而如果核的时候,我们误将Redis实例和中断程序绑定在不同的Socket,就有可能导致Redis和中断程序的跨Socket交互,这对Redis的性能也是一个很大的影响。...那么既然核对Redis这么重要,那么我们来看看Redis多核心的一些基本知识,这对于我们正确的核有很大作用,来看一个线上服务器的输出: [root ~]# lscpu Architecture:...如果我们把redis绑定在编号为5的核心上,将中断程序绑定在编号为6的核心上,那么二者交互的时候,就会跨Socket访问,从而影响Redis的性能。...03、Redis核的风险 既然Redis核能够带来这么多收益,那么核是不是没有任何的影响呢,自然也不是。

    80830
    领券