前端Vue页面轻松展示本地图片

2023-02-13 10:33:28

如何轻松地在 Vue 页面中展示本地图片：分步指南

在 Vue 项目中展示本地图片似乎轻而易举，但背后隐藏着一些重要细节。本文将深入探讨配置路径别名、在 Vue 组件中使用本地图片以及相关步骤，让您轻松掌握这一技巧。

配置路径别名

首先，让我们在 Vue 项目中配置路径别名，以便使用相对路径引用本地图片。在 main.js 文件中，添加以下代码：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  router
}).$mount('#app')

在 Vue 组件中使用本地图片

在 Vue 组件中，我们使用标签来展示图片，src 属性设置为图片请求路径。但是，由于图片存储在本地文件中，我们需要找到其实际地址。

<!-- App.vue -->
<template>
  <div>
    <img src="@/assets/image.png" alt="本地图片">
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

创建本地 images 文件夹

在本地创建一个 images 文件夹，并将其中的图片文件放入其中。

创建 Vue 项目中的静态资源文件夹

在 Vue 项目中，创建一个名为 static 的文件夹，并将 images 文件夹放入其中。

在 main.js 文件中配置静态资源路径

// main.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/about',
    component: About
  }
]

const router = new VueRouter({
  routes
})

Vue.config.productionTip = false

new Vue({
  router
}).$mount('#app')

// 配置静态资源路径
Vue.prototype.$static = '/static/'

在 Vue 组件中使用静态资源路径

在 Vue 组件中，我们可以使用静态资源路径来引用本地图片。

<!-- App.vue -->
<template>
  <div>
    <img :src="$static + 'images/image.png'" alt="本地图片">
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>