一、常见报错类型及原因

1. 404 (Not Found) 错误

GET http://localhost:8081/src/assets/images/cellphone.png 404 (Not Found)

原因分析：

  • 路径错误：图片路径拼写错误或相对路径不正确。
  • Webpack配置问题：Vue CLI使用Webpack进行资源打包，如果配置不当，可能导致路径解析错误。

2. 403 Forbidden 错误

  • 跨域问题：服务器设置了跨域访问。
  • 安全验证：某些图片服务器会验证请求来源，拒绝非正常来源的请求。

二、解决方案详解

1. 解决404 (Not Found) 错误

<img :src="require('@/assets/images/cellphone.png')" alt="Cellphone">

<img src="static/img/logo.png" alt="Logo">

方法三：配置Webpack别名 在vue.config.js中配置路径别名，简化路径书写。

const path = require('path');
module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@assets': path.resolve(__dirname, 'src/assets')
      }
    }
  }
};

然后在代码中使用别名：

<img :src="require('@assets/images/cellphone.png')" alt="Cellphone">

2. 解决403 Forbidden 错误

方法一：设置referrer策略 在index.html的<head>标签中添加以下代码，防止请求包含来源信息。

<meta name="referrer" content="no-referrer">

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        pathRewrite: {'^/api': ''}
      }
    }
  }
};

三、实际案例解析

案例一：循环数组对象导入图片报错

<img v-for="item in items" :src="item.image" :alt="item.name">

解决方案： 使用require()方法转换路径。

<img v-for="item in items" :src="require('@/assets/images/' + item.image)" :alt="item.name">

案例二：上传图片功能报错

<template>
  <div>
    <input type="file" @change="handleFileUpload" />
    <button @click="uploadFile">上传</button>
  </div>
</template>

<script>
import { ref } from 'vue';
import axios from 'axios';

export default {
  setup() {
    const file = ref(null);

    const handleFileUpload = (event) => {
      file.value = event.target.files[0];
    };

    const uploadFile = async () => {
      const formData = new FormData();
      formData.append('file', file.value);
      try {
        const response = await axios.post('/api/upload', formData);
        console.log(response.data);
      } catch (error) {
        console.log(error);
      }
    };

    return { file, handleFileUpload, uploadFile };
  }
};
</script>

四、总结