Vue 3 数据绑定图片：如何解决 404 错误？

在 Vue 3 中使用 require 上下文函数将数据绑定到图片 src 属性

问题：数据绑定中的 404 错误

在 Vue 3 项目中，将文件上传到后端，并希望在页面中显示这些图像。尽管文件上传成功，但尝试使用 :src 属性直接绑定图像路径时，会遇到 404 错误。

解决方法：使用 require 上下文函数

Vue 的 require 上下文函数允许动态加载模块，解决了 GET 404 错误。通过以下步骤实现：

1. 安装 vue-loader 和 url-loader
2. 修改 vue.config.js 以支持图像加载
3. 在模板中使用 require 上下文函数加载图像

具体步骤

1. 安装 vue-loader 和 url-loader

npm install --save-dev vue-loader url-loader

2. 修改 vue.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              esModule: false,
            },
          },
        ],
      },
    ],
  },
};

3. 在模板中使用 require 上下文函数

<img :src="require('../../' + item)" class="photo-image img-fluid" @click="console.log(item)">

代码片段

修改后的 Vue 模板：

<div class="p-3 row">
  <div class="p-3 col-2 photo-container" v-for="(item, index) in images" :key="index">
    <img :src="require('../../' + item)" class="photo-image img-fluid" @click="console.log(item)">
  </div>
</div>

结论

使用 require 上下文函数将图像路径解析为模块，动态加载并将其作为图像源。这消除了 404 错误，允许在 Vue 3 中正确显示上传的图像。

常见问题解答

1. 为什么使用 require 上下文函数？

它允许动态加载模块，解决 GET 404 错误，该错误源自直接绑定图像路径。

2. 如何安装 vue-loader 和 url-loader？

使用 npm install --save-dev vue-loader url-loader。

3. 如何配置 vue.config.js？

添加以下规则：

{
  test: /\.(png|jpe?g|gif|svg)$/,
  use: [
    {
      loader: 'url-loader',
      options: {
        limit: 8192,
        esModule: false,
      },
    },
  ],
}

4. 如何在模板中使用 require 上下文函数？

<img :src="require('../../' + item)" class="photo-image img-fluid" @click="console.log(item)">

5. 其他替代方案是什么？

您可以使用 import 语句加载图像，但 require 上下文函数更适合此场景。