SoFunction
Updated on 2025-04-04

Vue implementation sample code to read local pictures

Create a simple display page

Need to read local static files to obtain text information and determine picture Lu Jin

At the beginning, we used new XMLHttpRequest(). No problem with local testing. However, when deployed to a cloud server, the judgment of the picture is invalid. No matter how much the requested address is, the return response code is 200. (The reason is not found). So I changed the method to use img's failed callback method.

url Chinese encoding problem (it is also no problem with local testing, you must transcode online) decodeURI()

Official Documentation

// 
<template>
  <div >
    <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.$)
  },
  data(){
    return {
      drugName: '',
      drugInfo: '',
      drugImg: '',
      imgCheckCount: 0
    }
  },
  methods:{
    init(){
      =decodeURI(this.$)
      // =decodeURI(this.$)
      (this.$)
      // var destr = UrlDecode(str);
      // ()
       = 'image/'++'.jpg'
    },
    imageLoadError(e){
      ("onerror")
      //  = 'image/'++'.JPG'
      //  = true
       += 1
      ()
       = null
    },
    imgCheks(){
      if( === 1){
         = 'image/'++'.JPG'
      }else if( === 2){
         = 'image/'++''
      }else if( === 3){
         = 'image/'++''
      }
    },
    imgChange(){
      // ("ceshi"+)
      // ("ceshi"+('image/'++'.jpg'))
      // ("ceshi"+('image/'++''))
      if(('image/'++'.jpg')){
         = 'image/'++'.jpg'
      }else if(('image/'++'.JPG')){
         = 'image/'++'.JPG'
      }else if(('image/'++'')){
         = 'image/'++''
      }else if(('image/'++'')){
         = 'image/'++''
      }
      // ()
      // (('image/'++'.jpg'))
    },
    OpenPup(){
      let xhr = new XMLHttpRequest()
      //  let okStatus =  === "file:" ? 0 : 200;
      // ("GET", , false); // Online link address      // let drugUrl = +".text"
      let drugUrl = 'drug/'++".txt"
      ("GET", drugUrl, false); // Absolute path under public folder      ("txt/html;charset=utf-8")
      (null)
      // () // is the content in the text       = 
      // ()
    },
    // // Determine whether there is this file locally    // showimg (url) {
    // // Judgment result    //   let result = false
    //   url = './' + url
    // // Get all file names in this directory    //   const files = ('public/image/', false, /\.jpg$/)
    //   (())
    //   const filedata = ()
    // // Determine whether the file is present    //   ((item) => {
    //     if (item === url) {
    //       result = true
    //     }
    //   })
    // // Return result    //   return result
    // },
    isFileExist(filePath) {
      let xhr = new XMLHttpRequest();
      ('GET', filePath, false);
      ();
      (xhr)
      return  === 200;
    },
    checkImg(imgurl) {
      var imgObj = new Image();
       = imgurl;
       = function (res) {
        return true;
        ('Valid link')
      }
       = function (err) {
        return false;
        ('Invalid link')
      }
    }
  }
};
</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>

The above is the detailed content of the sample code for Vue to read local pictures. For more information about Vue to read local pictures, please follow my other related articles!