一、问题背景

二、常见问题及解决方案

1. 相对路径问题

解决方法：

  • 确保图片 banner2.jpg 确实存在于指定路径中。
  • 更改第二张图片的路径为相对 src/assets 的路径。例如，如果 banner2.jpg 存在于 src/assets 目录下，可以使用 require 来引入：
bannerImg: [require('@/assets/banner1.jpg'), require('@/assets/banner2.jpg')]

使用 @/assets 是指从 src/assets 开始的路径。

2. 资源处理配置

问题描述： Vue CLI 默认配置下，静态资源的路径通常需要使用 require 或 import 语句来正确处理。直接使用字符串路径可能导致路径解析错误。

解决方法：

  • 使用 require 语法确保图片路径正确：
data() {
  return {
    bannerImg: require('@/assets/banner1.jpg')
  };
}

3. SVG图片的使用

问题描述： 在Vue中，直接在 <img> 标签的 src 属性中填写SVG文件路径是一种可行的方式，但需要注意路径和跨域问题。

解决方法：

  • 确保SVG文件的路径是正确的。如果SVG文件位于Vue项目的 public 文件夹中，你可以直接通过相对路径或绝对路径来引用它。
  • 如果SVG文件位于 assets 文件夹中，由于Webpack在处理 assets 文件夹时可能会进行打包和路径转换，因此直接通过 <img src"..."> 可能无法正确加载。你可以通过配置Webpack（或在Vue CLI项目中配置 vue.config.js）来确保这些资源可以被正确访问。

三、动态路径的处理

1. 静态路径

<img src="@/assets/banner1.jpg" />

2. 动态路径

<img :src="dynamicImagePath" />

data() {
  return {
    dynamicImagePath: '@/assets/' + this.imageName
  };
}

四、最佳实践

  1. 使用 src/assets 目录：将所有静态资源放在 src/assets 目录下，并通过 require 或 import 来引入。
  2. 配置 vue.config.js：如果需要特殊处理静态资源路径，可以在 vue.config.js 中进行配置。
  3. 使用SVG组件：将SVG图片作为Vue组件来使用，这样可以利用Vue的响应式数据绑定和指令等特性。

五、示例代码

<template>
  <div>
    <img :src="bannerImg" alt="Banner Image" />
    <img :src="dynamicImagePath" alt="Dynamic Image" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      bannerImg: require('@/assets/banner1.jpg'),
      imageName: 'banner2.jpg',
      dynamicImagePath: ''
    };
  },
  mounted() {
    this.dynamicImagePath = require('@/assets/' + this.imageName);
  }
};
</script>

<style scoped>
img {
  width: 100%;
  height: auto;
}
</style>

六、总结