代码编织梦想

环境

boot + 阿里云oss + vue + vue-image-swipe

问题原因

  • yml文件中配置阿里云oss地址为http协议,因此保存图片为http开头地址;
  • vue开启了全局https访问,导致http自动转为https;
  • vue-image-swipe的API所需参数有两个
    本标签下所有img地址-imgList(转化后以https开头)
    我们想要预览的img(http开头)
  • API会通过imgList.indexof(img)获取预览img的索引,由于开头问题,导致index=-1,所以展示空白。

解决方法

  1. 在yml文件中,我们将阿里云oss地址改为https协议地址。
  2. 之前保存在数据库中的图片地址,我们直接修改为https协议的地址。

原文地址:TT的博客《【问题】vue-image-swipe预览图片空白》

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_43640874/article/details/127974793

Vue移动端商城项目-爱代码爱编程

1 准备基本的项目模板 文件结构如下(用之前webpack配置好的文件目录) index.html <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"

HbuilderX 2.6.15 版本说明-爱代码爱编程

HBuilder X - Release Notes ====================================== 2.6.15.20200421 新增 【重要】内置浏览器运行时,将日志直接输出到HBuilderX控制台新增 内置web服务器 支持自定义端口 (菜单【设置】【运行配置】)新增 FTP插件 支持通过commands在【自

uni-app 学习笔记 黑马优购商城-爱代码爱编程

https://www.escook.cn/docs-uni-shop/ 1、uni-app 和项目搭建 1.1 项目介绍 1.2 文档介绍 项目接口文档 1.3 什么是 uni-app 就是基于 vue 的一个框架, 一套代码,可以打包成 多个端的方案 1.4 下载和安装 HB uni-app 官方 推荐使用 HB 开发 模板丰富完善的

HubilderX更新记录-爱代码爱编程

要区分开HubilderX和Hubilder! 一般像我这样主攻后端前端要求不高的建议HubilderX,专业前端请选择Hubilder! HBuilder X - Release Notes ====================================== 3.2.16.20211122 修复 代码悬浮提示 某些情况下,HBuilde

vue 项目中用户登录及 token 验证的思路_前端不加班的博客-爱代码爱编程

vue-router 导航守卫 所谓“导航”,即路由正在发生变化。可在路由跳转时完成一些操作,而 router.beforeEach() 全局前置守卫可以在路由跳转前对现在状态进行校验,例如验证用户的登录状态,若未登录则可以

vue简单实例——axios_error_exception_worn的博客-爱代码爱编程

简单介绍: Axios 是一个基于 promise 网络请求库,作用于node.js 和浏览器中。 它是 isomorphic 的(即同一套代码可以运行在浏览器和node.js中)。在服务端它使用原生 node.js http 模块, 而在客户端 (浏览端) 则使用 XMLHttpRequests。 这是官网的介绍,巴拉巴拉,可以理解就是一个用来请求服

vue3留言墙项目——头部和底部静态页面搭建_lalaxuan的博客-爱代码爱编程

文章目录 创建项目头部底部 创建项目 Vue中使用scss 头部 头部当中有两个按钮,然后根据设计稿可知,本留言墙中有4个按钮,所以可以自己封装一个按钮组件 按钮组件的博客 components/

vue实现模糊查询:filter()_陌一一的博客-爱代码爱编程

需求:在输入框里输入内容,包含相关内容的值被筛选出来; 图示: 最初的代码: <body> <div id="box"> <input type="text" @input="handleInput()" v-model="mytext"> <ul>

vue3 + element plus + i18n 国际化_tiger_angel的博客-爱代码爱编程

1 前言 本篇旨在 Vue3 + Element Plus 国际化配置,支持多语言切换 2 Vue3 国际化 2.1 安装 vue-i18n npm i vue-i18n 2.2 新建 locales 文件夹 以简体中文和英文为例 在 src 下新建 locales 文件夹在 locales 文件夹下新建 zh-cn.ts exp

vue3 vuex_前端女孩的博客-爱代码爱编程

1、store配置 import {createStore} from 'vuex' const storeData={ state:() => ({}), getters:{},

vite+ts前期准备(尽量详细在更新)_rshylabs的博客-爱代码爱编程

创建和准备vite+ts项目 打开命令行或进入vscode打开终端 输入命令:npm init vite 选择vue+ts cd 进入项目 cnpm/yarn/npm install 初次运行项目 终

uniapp + hbuliderx更新日志_uniapp更新日志_草巾冒小子的博客-爱代码爱编程

HBuilder X - Release Notes ====================================== 3.2.3.20210825 【uni-app插件】 App平台 修复 3.2.

uniapp -爱代码爱编程

目录 前言例如:基于 uniapp 开发的微信小程序商城项目 1. 起步1.1 uni-app 简介1.2 开发工具1.2.1 下载 HBuilderX1.2.2 安装 HBuilderX1.2.3

el-爱代码爱编程

先看需要实现的效果 这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜单展示的路由 还有一点要注意,就是这里有两个router-vie