制作一个简单的展示页面
需要读取本地静态文件获取文字信息 和确定图片路劲
刚开始都是使用new XMLHttpRequest()。本地测试都没有问题。但是部署到云服务器时 对图片的判断就失效了 无论请求地址多少 返回响应码都是200.（没有找到原因）。 所以更换了方式 使用img的加载失败回调方法。
url中文编码问题（也是本地测试没问题，线上就必须转码了）decodeURI()
官方文档
// app.vue
<template>
<div id="app">
<div class="header">
<div class="main">
<div class="drug-name">
<span>{
{
drugName}}</span>
</div>
<div class="drug-img">
<img :src="drugImg" :alt="drugName" @error="imageLoadError">
</div>
<div class="drug-info" v-html="drugInfo"></div>
</div>
</div>
</div>
</template>
<script >
export default {
components: {
},
created() {
this.init()
this.OpenPup();
// this.imgChange();
console.log(this.$route.query)
},
data(){
return {
drugName: '',
drugInfo: '',
drugImg: '',
imgCheckCount: 0
}
},
methods:{
init(){
this.drugName=decodeURI(this.$route.query.drugName)
// this.drugName=decodeURI(this.$route.query.drugName)
console.log(this.$route.query.drugName)
// var destr = UrlDecode(str);
// this.imgChange()
this.drugImg = 'image/'+this.drugName+'.jpg'
},
imageLoadError(e){
console.log("onerror")
// this.drugImg = 'image/'+this.drugName+'.JPG'
// this.loadingOnOff = true
this.imgCheckCount += 1
this.imgCheks()
e.target.onerror = null
},
imgCheks(){
if(this.imgCheckCount === 1){
this.drugImg = 'image/'+this.drugName+'.JPG'
}else if(this.imgCheckCount === 2){
this.drugImg = 'image/'+this.drugName+'1.jpg'
}else if(this.imgCheckCount === 3){
this.drugImg = 'image/'+this.drugName+'1.JPG'
}
},
imgChange(){
// console.log("ceshi"+this.drugName)
// console.log("ceshi"+this.isFileExist('image/'+this.drugName+'.jpg'))
// console.log("ceshi"+this.isFileExist('image/'+this.drugName+'1.jpg'))
if(this.checkImg('image/'+this.drugName+'.jpg')){
this.drugImg = 'image/'+this.drugName+'.jpg'
}else if(this.checkImg('image/'+this.drugName+'.JPG')){
this.drugImg = 'image/'+this.drugName+'.JPG'
}else if(this.checkImg('image/'+this.drugName+'1.jpg')){
this.drugImg = 'image/'+this.drugName+'1.jpg'
}else if(this.checkImg('image/'+this.drugName+'1.JPG')){
this.drugImg = 'image/'+this.drugName+'1.JPG'
}
// console.log(this.drugImg)
// console.log(this.isFileExist('image/'+this.drugName+'.jpg'))
},
OpenPup(){
let xhr = new XMLHttpRequest()
// let okStatus = document.location.protocol === "file:" ? 0 : 200;
// xhr.open("GET", val.url, false); // 线上链接地址
// let drugUrl = this.drugName+".text"
let drugUrl = 'drug/'+this.drugName+".txt"
xhr.open("GET", drugUrl, false); // public文件夹下的绝对路径
xhr.overrideMimeType("txt/html;charset=utf-8")
xhr.send(null)
// console.log(xhr.responseText) // xhr.responseText为文本中的内容
this.drugInfo = xhr.responseText
// console.log(this.drugInfo)
},
// // 判断本地是否有该文件
// showimg (url) {
// // 判断结果
// let result = false
// url = './' + url
// // 获取该目录下所有文件名
// const files = require.context('public/image/', false, /\.jpg$/)
// console.log(files.keys())
// const filedata = files.keys()
// // 判断是否有该文件
// filedata.forEach((item) => {
// if (item === url) {
// result = true
// }
// })
// // 返回结果
// return result
// },
isFileExist(filePath) {
let xhr = new XMLHttpRequest();
xhr.open('GET', filePath, false);
xhr.send();
console.log(xhr)
return xhr.status === 200;
},
checkImg(imgurl) {
var imgObj = new Image();
imgObj.src = imgurl;
imgObj.onload = function (res) {
return true;
console.log('有效链接')
}
imgObj.onerror = function (err) {
return false;
console.log('无效链接')
}
}
}
};
</script>
<style lang="less">
//#app {
// font-family: Avenir, Helvetica, Arial, sans-serif;
// -webkit-font-smoothing: antialiased;
// -moz-osx-font-smoothing: grayscale;
// text-align: center;
// color: #2c3e50;
//}
html,body{
width: 100%; height: 100%; overflow: scroll;}
html::-webkit-scrollbar, body::-webkit-scrollbar{
width:0px;height:0px;}
body{
margin: 0;
padding: 0;
}
#app{
width: 100vw;
margin: 0;
padding: 0;
}
.header {
/*line-height: 1.5;*/
/*max-height: 100vh;*/
margin: 0;
padding: 0;
width: 100vw;
background-color: blanchedalmond;
}
.main{
margin: 0 5vw;
width: 90vw;
min-height: 100vh;
background-color: white;
}
.drug-name{
margin-bottom: 10vw;
padding-top: 10vw;
text-align:center
}
.drug-name span{
/*margin: auto;*/
/*margin-left: 50px;*/
color: #181818;
font-size: 32px;
font-weight: bold;
display: inline-block;
margin: 0 auto;
text-align: center;
}
.drug-img {
text-align:center
}
.drug-img img{
max-width: 80vw;
height: auto;
width: auto;
margin: auto;
text-align:center
}
.drug-info {
margin: 5vw 5vw 0;
padding-bottom: 5vw;
font-size: 16px;
color: #181818;
line-height: 30px;
overflow: auto;
}
.drug-info span{
font-size: 16px;
color: #181818;
}
h1 {
font-size: 20px;
text-align: left;
margin-bottom: 10px;
}
::v-deep p{
margin-bottom: 15px;
}
::v-deep b {
font-size: 19px;
font-weight: bold;
/*margin-bottom: 15px;*/
/*padding-bottom: 15px;*/
text-indent:2em;
}
</style>