vue 项目如何配置统一的图片路径

在 Vue 项目中，可以在 `vue.config.js` 文件中配置 `baseUrl` 来设置统一的图片路径。具体步骤如下：

1. 在项目根目录下创建 `vue.config.js` 文件。
2. 在 `vue.config.js` 文件中添加以下代码：

module.exports = {
  baseUrl: process.env.NODE_ENV === 'production'
    ? '/production-sub-path/'
    : '/'
}

3. 将上面的代码中的 `baseUrl` 修改为你的图片路径。
4. 在模板中使用图片时，使用相对路径，而不是绝对路径。例如：

<img src="./assets/images/logo.png" alt="Logo">

这样，就可以在不同的页面中使用相同的图片路径了。

相关问题

vue 项目如 图片路径 配置 文件

在 Vue 项目中，可以通过创建一个配置文件来设置统一的图片路径。具体步骤如下：

1. 在项目 `src` 目录下创建一个 `config` 文件夹。
2. 在 `config` 文件夹中创建一个 `env.js` 文件。
3. 在 `env.js` 文件中添加以下代码：

'use strict';
module.exports = {
  NODE_ENV: '"production"',
  IMG_BASE_URL: '"/your/image/path/"'
};

4. 将上面的 `IMG_BASE_URL` 修改为你的图片路径。
5. 在 `vue.config.js` 文件中添加以下代码：

const env = require('./config/env');
module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? env.IMG_BASE_URL
    : '/'
}

6. 在模板中使用图片时，使用相对路径，并在路径前加上 `$` 符号。例如：

<img :src="`${$IMG_BASE_URL}logo.png`" alt="Logo">

这样，就可以在不同的页面中使用相同的图片路径了。注意，这里使用了 Vue 的计算属性，所以需要在组件的 `computed` 中定义 `$IMG_BASE_URL`。定义方式如下：

computed: {
  $IMG_BASE_URL() {
    return process.env.IMG_BASE_URL;
  }
}

这样，就可以通过 `$IMG_BASE_URL` 访问到你在 `env.js` 中定义的图片路径了。

vue img 图片路径

在 Vue 中，如果要显示图片，可以使用 `img` 标签，然后将图片的路径绑定到 `src` 属性上，例如：

<template>
  <div>
    <img :src="imageUrl" alt="My Image">
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: require('@/assets/images/my-image.png')
    }
  }
}
</script>

在上面的代码中，`require('@/assets/images/my-image.png')` 会返回一个图片的路径，这个路径会被绑定到 `src` 属性上，从而显示图片。其中，`@` 表示的是项目根目录，`assets` 表示的是存放图片的目录，`my-image.png` 则是图片的文件名。需要注意的是，如果图片是存放在 public 目录下的话，可以直接将图片的路径绑定到 `src` 上，例如：

<img src="/images/my-image.png" alt="My Image">

这里的 `/images/my-image.png` 表示的是 public 目录下的 `images` 子目录中的 `my-image.png` 文件。