vue 项目上线遇到图片失效问题解决

作者: 小李不小 | 来源:发表于2021-05-26 15:00 被阅读0次

vue 项目上线遇到图片失效问题解决
vue项目部署到服务器（tomcat）下
vue-resource 解决跨域问题
图片路径有问题
Typora等markdown笔记软件图片链接失效的问题解决办法
Cordova 打包 Vue 项目到Android打开白屏
Vue首屏加载慢的优化方案
vue项目上线
总结
Vue.js实战

在我们项目中，假如遇到后台接口返回的图片不能显示，这样就很影响界面美观，下面是我的解决方案。

image.png

解决方案：使用onerror，当时图片失效的时候触发

<template>
     <img 
      src="images/logo.png" 
      :onerror="erroerImg"
      style="width:100px;height:100px;"
      >
</template>
<script>
  data(){
            return{
   
         erroerImg:'this.src="'+require('@/assets/checar.jpg')+'"'
            }
        },
</script>

下面就是效果

image.png

vue 项目上线遇到图片失效问题解决
在我们项目中，假如遇到后台接口返回的图片不能显示，这样就很影响界面美观，下面是我的解决方案。解决方案：使用one...
vue项目部署到服务器（tomcat）下
今天一个vue小项目完成之后打包上线遇到的坑，特此记录！
vue-resource 解决跨域问题
vue 与 vue-resource 跨域问题解决方法一：在vue项目下的 config/index.js 文...
图片路径有问题
一个vue项目中有一张图片，打包出来后发现background-image的路径出现了问题解决方法：1、先在dat...
Typora等markdown笔记软件图片链接失效的问题解决办法
Typora等markdown笔记软件图片链接失效的问题解决办法，图片的相对路径、绝对路径的设置，图片上传到图床的...
Cordova 打包 Vue 项目到Android打开白屏
Cordova 打包 Vue 项目到Android打开白屏问题解决方案一. 修改 vue.config.js 更...
Vue首屏加载慢的优化方案
使用vue构建项目首屏加载时，出现加载慢，白屏的问题解决方案：步骤一 webpack来打包vue项目，vendo...
vue项目上线
1.在config、index.js（./） 2.在src/main.js 4.在style加scope 8.配置...
总结
1，图片路径引用问题：vue项目上线后一般放在子目录里面使用常规的图片路径引用的方式在本地运行是没有问题的 ...
Vue.js实战
Vue.js实战思维导图防止博客图床图片失效，防止图片源站外链： http://www.processon.c...