1.单个图片引用
html
<img :src="userImgSrc" />
ts
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({name: "Tab1Page",components: {},setup(props, context) {let url = "image/a/a(1).png";let userImgSrc = require("../assets/" + url);return {userImgSrc,};},
});
</script>
2.多个图片引用
html
<div class="fun-item" v-for="item in newItemList" :key="item.title"><img :src="item.png" />
</div>
ts
setup(props, context) {let newItemList: any[] = [];let funObj = {a: "1111",aa: "11111111",aaa: "22222",aaaa: "3333",};Object.keys(funObj).forEach((_, i) => {newItemList.push({png: require("../assets/" +`image/a/a(${i + 1}).png`),title: _,});});return {newItemList};},
3.axios 临时使用 proxy 跨域代理
把 axios 的 请求路径 改造为当前 web 项目的run路径：
axios.defaults.baseURL = 'http://localhost:8080'
vue.config.js 的配置：
module.exports = {devServer: {proxy: 'https://www.aaa.cn'}
}
重启项目,你会发现不再跨域啦~~
npm run serve
4.ionic6+Vue3+ts+Capacitor 系列–禁用去除按钮波纹ion-ripple-effect
html
<ion-tab-button tab="tab1" href="/tabs/tab1" class="btn-dis-effect"><ion-icon :icon="bagCheckOutline" /><ion-label>A</ion-label></ion-tab-button>
less
// 配置禁用去除按钮波纹ion-ripple-effect---start
.btn-dis-effect{--ripple-color: transparent;}
// 配置禁用去除按钮波纹ion-ripple-effect---end
- 今天就写到这里啦~
- 小伙伴们，(￣ω￣(￣ω￣〃 (￣ω￣〃)ゝ我们明天再见啦~~
- 大家要天天开心哦
欢迎大家指出文章需要改正之处~
学无止境，合作共赢
