img标签src动态绑定资源失败问题

这篇具有很好参考价值的文章主要介绍了img标签src动态绑定资源失败问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

img标签src动态绑定资源失败问题

需要采用require的方式进行

在 Vue 中,require 是一个通用的模块加载函数,用于在运行时(客户端或服务器端)引入模块。它通常用于加载 JavaScript 文件、JSON 数据、静态资源等。

组件使用: 

 <MyBox :mapIcon="require('./../../assets/images/'imgSrc+'.png')"></MyBox >

组件代码:

  <img class="primary" :src="mapIcon" :alt="mapTitle" />

此时就可以实现正常的访问指定路径下的静态资源了。

原先的时候直接

  <img class="primary" src="../assert/images/xx.png" :alt="mapTitle" />

采用路径的形式就可以直接访问到对应的图片,但是现在采用动态绑定的时候路径的图片直接就是一个地址,不是一个base64的资源信息,需要采用上面的require进行资源的导入。文章来源地址https://www.toymoban.com/news/detail-727716.html

到了这里,关于img标签src动态绑定资源失败问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 4.正则提取html中的img标签的src内容

    我们以百度贴吧的1吧举例 目录 1  把网页搞下来 2  收集url 3  处理url 4  空的src 5  容错 6  不使用数字作为文件名 7  并不是所有的图片都用img标签表示 8  img标签中src请求下来不一定正确 9  分页   搞下来之后,双击打开是这样的 我们实际拿的就是 img标签中src的内

    2024年02月09日
    浏览(44)
  • 解决在vue中img标签不显示图片的问题

    在vue中, 经常会遇到img标签不展示的问题, 本人遇到两种, 都是因为webpack打包, 导致找不到路径, 所以不现实, 总结几个可以解决本地图片路径显示不出来的问题: 1.把图片放在src同级的static文件夹下。 2.把图片放在cdn上,把网络地址存在imgUrl里,然后直接去展示。 3.图片放在

    2024年02月13日
    浏览(36)
  • js修改img的src属性显示变换图片到前端页面,img的src属性显示java后台读取返回的本地图片

    img的src属性是前端用来显示一张图片的来源,一般情况下src最常见是显示项目中resourcesstatic问价夹下的图片,或者显示公网上的图片,如果想要在前端显示本地图片那要怎么处理呢?如果直接用本地图片的地址(例如src=“D:Userstest.jpg”)前端是无法显示的。 img 是空标签,它

    2024年02月14日
    浏览(57)
  • 解决react,<img>src使用require方法引入图片不显示问题

    解决方法: 再导入的图片后加.default即可 img src={require(\\\'../../images/bg.png\\\').default} alt=\\\"\\\" /   推荐阅读:https://www.cnblogs.com/qianxiaoniantianxin/p/14789826.html

    2024年02月15日
    浏览(44)
  • 获取到img中src

    let src = str.match(/imgs+(.*?)src=\\\'\\\"/g) let srcs = src.map(item={ let k= item.match(/src=\\\'\\\"[\\\'\\\"]/)[1] return k }) srcs = srcs?srcs:[]

    2024年02月10日
    浏览(37)
  • vue中渲染接口返回的html标签及标签上绑定事件处理

    目录 一、前言 二、使用步骤 1.引入vue 2.生成构造器,创建子类  三.遇到的问题         最近这两天工作中有个需求,将接口返回的html标签渲染出来,最开始用的v-html,可以渲染出来,但是a标签上绑定的事件触发不了,然后事件上绑定的参数就拿不到,最后使用模板成功

    2024年02月15日
    浏览(48)
  • phpstorm添加vue 标签属性绑定提示和提示vue的方法提示

    把上面这些文字粘贴到点击右下角放大按钮 后的文本框里,然后保存即可实现标签属性提示 下面是提示js方法,把本地的vue.js 引入到编辑器即可

    2024年02月13日
    浏览(40)
  • Vue动态绑定技术详解

    Vue.js是一种流行的JavaScript框架,它提供了许多方便的功能来帮助我们构建交互式Web应用程序。其中一个最强大的功能是动态绑定,它使我们能够轻松地将数据绑定到DOM元素上,并实现实时更新。本文将深入探讨Vue动态绑定的原理、分析、实战和总结。 原理:Vue动态绑定是通

    2024年02月08日
    浏览(30)
  • video:动态改变了source里src的视频路径,但是视频不显示问题

    1.dom 2.动态改变src  在浏览器里面,我们看到source里的src视频链接已加载出来了,可视频未显示。 答案来了: 当  video  中存在  source  标签的时候,浏览器渲染之后会自动去获取地址,但是,即便地址改变了,浏览器也不会再去获取视频了。 1.把src放在video标签上 2.把操作

    2024年02月16日
    浏览(29)
  • 【vue】Vue中class样式的动态绑定

    简介: Vue 中 class 样式的绑定 1、字符串写法 使用场景 :样式的类型不确定 写法: 手动触发样式改变 注意:字符串使用的是vue实例data中已有的属性 2、对象写法 使用场景 :样式个数、类名确定,通过Bollean动态展示与否 写法: 对象写在内联样式 对象写在data中 3、数组写法

    2024年02月15日
    浏览(37)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包