在 Vue 组件中引入图片的方法

Vue 3月前 1.0K

在 Vue 组件中，经常需要引入图片来展示页面内容。本文将介绍在 Vue 组件中引入图片的方法，并且针对不同情况给出详细的示例和注意事项。

在模板中直接引入图片

在 Vue 组件的模板中，可以直接使用 img 标签来引入图片。例如：

<template>
  <div>
    <img src="./assets/logo.png">
  </div>
</template>

在这个例子中，图片的路径是相对于当前组件文件的，因此需要在路径前面加上 ./。

在样式中引用图片

在 Vue 组件的样式中，可以使用 url 函数来引用图片。例如：

<template>
  <div class="logo">
    Hello, Vue!
  </div>
</template>

<style>
.logo {
  background-image: url('./assets/logo.png');
  width: 100px;
  height: 100px;
}
</style>

在这个例子中，url 函数的参数也是相对于当前组件文件的路径。

在 JavaScript 中引用图片

在 Vue 组件的 JavaScript 中，可以使用 import 或 require 语句来引用图片。例如：

<template>
  <div>
    <img :src="logo">
  </div>
</template>

<script>
import logo from './assets/logo.png';

export default {
  data() {
    return {
      logo: logo
    };
  }
};
</script>

在这个例子中，使用 import 语句引入了图片，并将其赋值给了组件的 logo 属性。在模板中，可以使用 :src 绑定这个属性来展示图片。

注意事项：

图片的路径是相对于当前组件文件的路径。如果需要引用其他目录下的图片，需要使用相应的相对路径或绝对路径。
在使用 import 或 require 语句引入图片时，需要注意图片的格式。例如，如果引入的是 SVG 图片，需要使用 vue-svg-loader 等加载器进行处理。
在使用 url 函数引用图片时，需要注意浏览器的缓存问题。可以在图片的 URL 后面添加一个时间戳或随机数来避免缓存问题。例如：

<style>
.logo {
  background-image: url('./assets/logo.png?t=' + Date.now());
  width: 100px;
  height: 100px;
}
</style>

使用 CDN 引用图片

在有些情况下，我们可能需要使用 CDN 上的图片来加速页面加载。在 Vue 组件中，可以使用 process.env.VUE_APP_CDN_URL 变量来引用 CDN 上的图片。例如：

html复制代码

<template>
  <div>
    <img :src="cdnUrl + '/assets/logo.png'">
  </div>
</template>

<script>
export default {
  data() {
    return {
      cdnUrl: process.env.VUE_APP_CDN_URL
    };
  }
};
</script>