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 属性上。

相关文章