vue 学习之 image src 的动态绑定

对于资源类参数的绑定，一定要require 进来，不能直接路径导入问题：img的src属性填写的图片地址，可以正常渲染，但是一旦利用绑定:src属性的时候，图片就加载失败了需求：鼠标移入切换图片上一位前端小哥哥，没做这个交互，我接手后加上去，很简答的交互，

繁夜

3294人浏览 · 2021-08-20 10:07:10

繁夜 · 2021-08-20 10:07:10 发布

对于资源类参数的绑定，一定要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;

在这里插入图片描述

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^