在vue js中获得图像宽度和高度的50%的工作时间。

Question

在Vue js (编辑)中，视图文件中有这个结构：

<template>
    <div>
        <h1>{{quiz.name}}</h1>
    </div>
    <div class="quizForm">
        <div class="quizQuestContainer">
            <div class="quizQuestions" v-for="(question, index) in quiz.questions"
            :key = index >
            <div v-if="index === questionIndex">
                <h2>{{ question.text }}</h2>
                <ol>
                    <li v-for="(response, index) in question.responses"
                        :key = index
                    >
                    <label>
                       
                        <input type="radio" 
                            :value="[response.res_value === question.solution]"
                            :name="index" 
                        > {{response.res_text}}
                    </label>
                    </li>
                </ol>
                <button v-if="questionIndex > 0" v-on:click="prev">
                    prev
                </button>
                <button v-on:click="next">
                    next
                </button>
            </div>
        </div>
        <div v-if="questionIndex === quiz.questions.length">
            <h2> Quiz finished</h2>
        </div>
    </div>
    <div class="quizImage">
            <div class="ImageArea">
                <img :src="imageCrop(quiz.iiif)">
                <br/>    
            </div>
</template>
<script>
    import sourceData from '@/data.json'

    export default {
      props:{
        id: {type: String, required: true}
      },
      data(){
        return {
            questionIndex: 0,

        }
      },

      computed:{
        quiz(){
            return sourceData.quizzes.find(quiz =>quiz.id === parseInt(this.id))
            },
        },
       methods: {
         // Go to next question
       next: function() {
         this.questionIndex++;
       },
       // Go to previous question
       prev: function() {
           this.questionIndex--;
       },

       imageCrop: function(iiif) { 
          let image = new Image();
          image.src = iiif; 
          let width =  image.width; 
          let height = image.height;
          return image.src + " this is width " + width + " and this is height " + height
       }
</script>

有时我得到正确的高度和宽度，但有时我得到0和0。有缓存问题吗？方法是正确的方法吗？我是Vue的新手，所以我不太明白它是如何工作的。

编辑:如果我使用

 image.onload = () => {
       let height = image.height;
       let width = image.width;
       return image.src + " this is width " + width + " and this is height " + height
 }

页面上什么也没有出现。我试着把一个错误处理像这样：

nameError: function(){
        try {
            const error = new Error();
            return error.message;
        } catch (ex) {
            return ex.message;
        }

它在DOM中生成一个事件：

const = (e) => { //异步边缘情况#6566:内部单击事件触发器修补程序、事件处理程序//在修补程序期间附加到外部元素，然后再次触发。这是因为浏览器在事件传播之间触发了微任务。//解决方案很简单:我们在附加处理程序时保存时间戳，//处理程序只有在传递给它的事件被附加//之后才会触发。例如，5 /* NATIVE_EVENT_HANDLER */，e)；if (skipTimestampCheck欧元/ timeStamp >= invoker.attached - 1) {skipTimestampCheck invoker.value

数据JSON如下所示：

{
    "quizzes": [
      {
        "name": "Quiz A",
        "slug": "quiz-1",
        "image": "D000533S_AlbiniW_ST40.jpg",
        "iiif": "https://gallica.bnf.fr/iiif/ark:/12148/btv1b9042253v/f1/full/,550/0/native.jpg", 
        "id": 1,
        "description":
          "First quiz",
        "questions": [
            {
              "text": "Question 1",
              "responses": [
                {"res_text": "Wrong",
                  "res_value": "a"
                }, 
                {"res_text": "Right",
                  "res_value": "b"
                }
              ],
              "solution": "a"
            }, 
            {
              "text": "Question 2",
              "responses": [
                {"res_text": "Right",
                  "res_value": "a"
                }, 
                {"res_text": "Wrong",
                  "res_value": "b"
                }
              ],
              "solution": "b"
          }
        ]
      },

等。

Answer 1

正如@theshark在注释中指出的那样，创建图像以检索其维度是一个异步过程。AFAIK，您将无法在呈现中使用这种方法的结果。

目前还不清楚您想要实现的是什么，但最简单的方法是，一旦imageCrop方法获得这些维度，就将其存储在组件的数据中。这个方法不必在模板中调用，而是在created钩子中调用。

可以在模板中直接绑定组件的数据：

<template>
  <div>
    <div>
      <h1>{{quiz.name}}</h1>
    </div>
    <div class="myImageData">
       {{ src }} this is width {{ width }} and this is height {{ height }}
    </div>
    <div class="quizImage">
        <div class="ImageArea">
          <img :src="src">
          <br/>    
        </div>
    </div>
    <button @click="prev">⬅️</button>
    <button @click="next">➡️</button>
  </div>
</template>

<script>
import sourceData from '@/data.json'
export default {
 props:{
    id: {type: String, required: true}
  },
  data() {
    return {
      src: "",
      width: 0,
      height: 0,
      questionIndex: 0,
    }
  },
  computed:{
    quiz(){
      return sourceData.quizzes.find(quiz => quiz.id === this.questionIndex);
    },
  },
  updated() {
    this.imageCrop();
  },
  created() {
    this.questionIndex = parseInt(this.id);
    this.imageCrop();
  },
  methods: {
   next: function() {
     this.questionIndex++;
   },
   prev: function() {
     this.questionIndex--;
   },
   imageCrop: function() {
      const iiif = this.quiz.iiif;
      let image = new Image();
      image.onload = (event) => {
        this.width = event.target.width;
        this.height = event.target.height;
        this.src = event.target.src;
      }
      image.src = iiif; 
    }
  }
}
</script>

(看到完整的代码后，我建议将逻辑拆分为更小的组件)