uniapp image 动态引入路径不显示

这篇具有很好参考价值的文章主要介绍了uniapp image 动态引入路径不显示。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

今天猜到了一个 image 标签的坑,动态的这是图片地址不生效的问题,代码:

<image :src="item.img"></image>

img: './icon/change.png'

 我原先是使用了,静态的 src ,路径是相对路径,后来优化代码,想通过js直接设置好 方法、名称、图片 等信息,但是路径放到js中在通过 html 渲染 图片消失了

uniapp 引入图片,uni-app,前端

图片的位置其实还在,控制台查看html:

uniapp 引入图片,uni-app,前端

背景图变成了 none 

 下面是查看相关资料后改正后的代码

<image :src="item.img"></image>

img: '/static/icon/change.png'

将原来在同级目录下的图片放到了 系统 static 静态文件中,问题就解决了,看了看官方文档,也没有找到具体原因。

除了这个 图片 位置的一些问题,还有 我们使用路径: @ 的问题

img: '@/static/icon/change.png'

在html中直接写的话是没有问题的,但是动态引用的时候,也会有不显示的同上错误,只需要去掉@符即可。

注:看到一些文章有 使用 相对路径  ../../ 的时候也会出现不显示的错误,在这了也同时记录一下文章来源地址https://www.toymoban.com/news/detail-642364.html

到了这里,关于uniapp image 动态引入路径不显示的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • 微信小程序 background-image直接设置本地图片路径,编辑器正常显示,真机运行不显示解决方法

    微信小程序,设置background-image直接设置本地图片路径。 编辑器正常显示,真机运行不显示 background-image只能用网络url或者base64图片编码。 1、将本地图片转为网络url后设置到background-image上 例如,云开发,后台上传本地图片 2、本地图片转成base64格式后设置到background-image上

    2024年02月15日
    浏览(78)
  • uni-app image懒加载

     1、 uni-app官方 给的文档注意看 lazy-load Boolean false 图片懒加载。只针对page与scroll-view下的image有效 微信小程序、百度小程序、字节跳动小程序、飞书小程序 只针对page与scroll-view下的image有效 出处image | uni-app官网 2、 微信官方 文档这个注意看 lazy-load boolean false 否 图片懒加载

    2024年02月11日
    浏览(29)
  • 【uni-app项目如何引入 uView组件库】

    uView官方文档 第一步: 在公司创建完成uniapp项目后引入uView 第二步: 您如果是使用HBuilder X创建的uniapp项目,使用uView组件库的话需要在HBuilder X下载插件库 下载 uni_modules ,(如果这个看不懂可以看官方文档) (1) HBuilder X插件库中下载 uni_modules 现在是已经将 uView导入到项目中了

    2024年02月05日
    浏览(56)
  • uni-app - - - - - 小程序使用background-image无效?

    如题目所说,在开发小程序时,遇到该问题,该如何解决呢??? 解决办法如下: 推荐指数:🌟 操作: 在需要的位置,额外添加一个 image标签src 即为想要的图片,将其对照父元素绝对定位, z-index:1 ,将其视为背景。 推荐指数:🌟 标签: css: 推荐指数:🌟🌟 推荐指数

    2024年02月15日
    浏览(45)
  • uni-app引入地图map组件--APP开发

    需求场景:使用uni-app地图组件,实现APP开发 开发环境:Mac,HbuildX3.4.14 测试环境:iOS真机调试 一、流程 1、关于Uini-app的map组件:官方文档说明。map组件是原生组件,目前只针对原生APP开发,因此通过app-nvue实现,同时选择的地图服务商只能是高德地图。 2、创建高德地图应用

    2024年02月15日
    浏览(62)
  • uni-app 多端操作引入vant 避坑亲测版~

    我uni选择的是v3版本,项目目前是做h5以后会扩展到小程序以此为前提 uni-app引入vant3 h5 可以使用但是 微信小程序 打不开! 引入 vant-weapp微信小程序 有效果 h5识别不到,然后网上搜的帮助都不大,写篇文章希望可以帮到你们,也给自己留个文章做记录——以下开始 vant-weapp 网

    2024年02月09日
    浏览(44)
  • 使用vue2开发uni-app项目--引入uview-ui

    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档 目录 前言 一、安装 1、安装uview-ui 2、安装scss支持 二、配置 1、在main.js中引入uView库 2、uni.scss文件中引入uView的全局SCSS主题文件  3、在APP.vue文件中引入uView基础样式 4、在pages.json中 配置easycom组件模式

    2024年02月04日
    浏览(63)
  • uni-app 之 图片

    uni-app 之 图片 获取图片 v-bind 动态绑定 image.png

    2024年02月10日
    浏览(52)
  • uni-app小程序引入iconfont的三种方式详解(无需下载文件到项目)

    官网iconfont的引入方式有三种分别为: Unicode 、 Font class 、 Symbol , 其中已明确说明 Unicode、Font class 这两种引入方式 不支持多色 。 单色如何理解呐?具体请看效果对比图(左图为UI上传的图标样式,右边为我们使用这两种方式引入后不加任何样式的效果) 是不是很丑? 另外

    2024年02月09日
    浏览(81)
  • 纪录小知识:image.open(图片路径)

               由于自己用了2个不同的相机采图,导致有的是灰度图,有的是彩图,都混合在一起。在做图像扩增的时候,出现了这样的报错。 其实,这里错误就是图像的shape不一致了;做了调试,可以发现图的shape不一样   修改方法就是:调用.convert() 函数---做个统一;要么

    2023年04月08日
    浏览(57)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包