vue 学习之 image src 的动态绑定

最新推荐文章于 2025-06-23 16:52:49 发布

繁夜

最新推荐文章于 2025-06-23 16:52:49 发布

阅读量3.3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： # vue 学习文章标签： vue

本文链接：https://blog.csdn.net/gpf19930310/article/details/119817193

vue 学习专栏收录该内容

9 篇文章

订阅专栏

本文探讨了在uni-app中资源参数绑定的最佳实践，强调了使用require或相对路径而非绝对路径的重要性。同时，指出uni-app可能存在的bug，即当图片文件夹名为'icon'且包含png文件时，在APP环境中无法正确加载，而在网页上正常。解决方案是更改文件夹名称，并确保路径无中文。此外，还提到了背景图片URL的正确写法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

对于资源类参数的绑定，一定要require 进来或者使用相对路径，不能使用绝对路径

<image class="switch" :src="irri.switch ? switchOnPath : switchOffPath" mode=""></image>

data() {
return {
// switchOnPath: require('@/static/image/mipmap-xhdpi/on.png'),
// switchOffPath: require('@/static/image/mipmap-xhdpi/off.png')
switchOnPath: '../../static/image/mipmap-xhdpi/on.png',
switchOffPath: '../../static/image/mipmap-xhdpi/off.png'
}

请添加图片描述

另外可能是uni-app 的一个bug 文件夹名如果是用的 icon 里面放的是png 的话，在app 里面调用图片会加载不了，但是网页很正常，另外 路劲中不能使用中文

background: url('~@/static/icon/header_press_on.png') no-repeat center;

文件夹名改为 bg后

background: url('~@/static/bg/header_press_on.png') no-repeat center;

在这里插入图片描述