vue动态引入图片

Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架，它允许开发者使用组件化的方式来构建复杂的交互界面。在 Vue 中动态引入图片是常见的需求，本文将介绍如何在 Vue 中动态引入图片，并提供一些实例代码。

1. 使用 require 动态引入图片

Vue 允许使用 require 来动态引入图片，我们可以将图片链接作为参数传递给 require 函数，然后将返回的路径赋值给 Vue 的 data 属性中定义的变量。例如：

```vue

```

在上述代码中，我们通过将图片的路径作为参数传递给 require 函数来动态引入图片。在 mounted 生命周期钩子中，我们将返回的路径赋值给 Vue 的 data 属性中的 image 变量。然后，在模板中使用动态绑定的方式将 image 变量绑定到 img 标签的 src 属性上，这样就可以动态加载图片了。

2. 使用 import 动态引入图片

除了使用 require，我们还可以使用 import 来动态引入图片。不同于 require 的是 import 是 ES6 的模块化语法，它可以在代码的任何地方使用，并且允许异步加载模块。下面是一个使用 import 动态引入图片的示例代码：

```vue

```

在上述代码中，我们通过 import 引入图片，并使用 then 方法获取返回的图片路径。由于 import 返回的并不是直接的图片路径，而是一个包含图片路径的对象，我们需要使用 .default 来获取实际的图片路径，然后将它赋值给 Vue 的 data 属性中的 image 变量。

需要注意的是，使用 import 动态引入图片时，需要修改 Vue 的配置文件 vue.config.js，将其设置为以下内容：

```javascript

// vue.config.js

module.exports = {

chainWebpack: config => {

config.module.rules.delete('svg'); // 删除默认配置中处理svg的loader

}

};

```

这样做是因为 Vue 的默认配置会将 svg 文件转为 vue 组件，而非直接引入。删除默认配置中处理 svg 的 loader 后，我们才能通过 import 引入 svg 图片。

总结：

在 Vue 中动态引入图片有多种方法，本文介绍了两种常用的方法：使用 require 和使用 import。无论我们选择哪种方法，都需要将获取到的图片路径赋值给 Vue 的 data 属性中定义的变量，然后在模板中通过动态绑定的方式将变量绑定到 img 标签的 src 属性上。

以上是关于在 Vue 中动态引入图片的相关内容，希望能对你有所帮助。如果你还有其他疑问，可以查阅 Vue 官方文档或提问。祝你编写愉快！