Vue.js+Vite项目图片资源绑定404错误求助

你的问题出在静态资源路径没有被构建工具（Webpack/Vite）正确处理，直接拼接字符串路径无法让工具识别并打包图片资源，导致404错误。以下是几种可行的解决方法：

• 方案1：在data.js中通过require引入图片
  修改data.js，用require包裹图片路径，让构建工具提前识别资源：

  export const Quizzes = [
    { 
      firstWord: "happy", 
      secondWord: "srećan", 
      imageSrc: require("../assets/happy--women.jpg"), 
    },
    { 
      firstWord: "lijepo", 
      secondWord: "nice", 
      imageSrc: require("../assets/nice-women.jpg") 
    },
  ]
  

  模板中直接绑定即可：

  <img class="quiz-image" :src="quizItems[currentCount].imageSrc" alt="Quiz Image"/>
  

• 方案2：在模板中动态使用require拼接路径
  保持data.js不变，修改模板里的img标签，用require包裹路径字符串：

  <img class="quiz-image" :src="require('../assets/' + quizItems[currentCount].imageSrc)" alt="Quiz Image"/>
  

  这种方式要求图片文件名是构建工具可静态分析的，你的场景完全适用。

• 方案3：将图片移至public目录（适用于Vite项目）
  把图片文件移动到项目根目录的public文件夹下，修改data.js的路径：

  export const Quizzes = [
    { firstWord: "happy", secondWord: "srećan", imageSrc: "happy--women.jpg", },
    { firstWord: "lijepo", secondWord: "nice", imageSrc: "nice-women.jpg" },
  ]
  

  模板中通过根路径访问：

  <img class="quiz-image" :src="`/${quizItems[currentCount].imageSrc}`" alt="Quiz Image"/>
  

  public目录下的资源会被直接复制到构建产物的根目录，无需构建工具处理即可直接访问。

内容的提问来源于stack exchange，提问作者Muxtorjon OLIMOV