javascript - 使用vue加载本 map 片时出现404错误

Question

我正在尝试在 VueJs 中制作一个简单的掷骰子游戏，但我在使用骰子图像时遇到问题，它总是出现 404 错误，当我尝试使用 require() 时，它说它未定义

通过使用此方法而不是使用 require() new URL('./components/icons/'+ this.img[this.dice-1], import.meta.url).href 得到了解决方案;

代码:

App.vue

<template>
  <div>
    <button @click="roll">roll</button>
    <p> Resultado: {{dice}} </p>
    <div v-if="dice != 0">
      <img :src="selected"/>
    </div>
  </div>
</template>

<script>
  export default {
    data(){
      return{
        img: [
          '@/components/icons/dice1.png',
          '@/components/icons/dice2.png',
          '@/components/icons/dice3.png',
          '@/components/icons/dice4.png',
          '@/components/icons/dice5.png',
          '@/components/icons/dice6.png',
        ],
        selected: '',
        dice: 0,
      }
    },
    created(){
      this.selected = this.img[1];
    },methods:{
      roll: function(){
      this.dice = Math.ceil(Math.random() *6);
      this.select = this.img[this.dice];
      console.log(this.img[this.dice]);
      }
    }
  }
</script>

主要.js

import { createApp } from 'vue'
import App from './App.vue'


import './assets/main.css'

createApp(App).mount('#app')

Answer 1

我在你的代码中找不到 require()，但你可以试试 import 语句:

import { ModuleName } from 'pathname'