uniapp项目中怎么统一管理图片地址

3.使用Vuex进行状态管理：如果你已经在项目中使用了Vuex，可以在store中定义一个state来存储图片地址，并在需要使用图片的地方通过Getter获取图片地址。2.创建配置文件：可以创建一个配置文件，例如config.js，用于存储图片地址的配置信息。在需要使用图片的地方，引入该配置文件并获取对应的图片地址。1.使用全局变量：在Vue的实例中，可以定义一个全局变量来存储图片的基础地址，然后

z青蛙

1014人浏览 · 2023-07-13 14:48:21

z青蛙 · 2023-07-13 14:48:21 发布

1.使用全局变量：在Vue的实例中，可以定义一个全局变量来存储图片的基础地址，然后在需要使用图片的地方，通过拼接路径来获取完整的图片地址。

// main.js
Vue.prototype.$baseUrl = 'https://example.com/images/';

// 在组件中使用
<template>
  <img :src="$baseUrl + 'image.jpg'" />
</template>

2.创建配置文件：可以创建一个配置文件，例如config.js，用于存储图片地址的配置信息。在需要使用图片的地方，引入该配置文件并获取对应的图片地址。

// config.js
export default {
  baseUrl: 'https://example.com/images/'
}

// 在组件中使用
<template>
  <img :src="baseUrl + 'image.jpg'" />
</template>

<script>
import config from './config.js';

export default {
  data() {
    return {
      baseUrl: config.baseUrl
    }
  }
}
</script>

3.使用Vuex进行状态管理：如果你已经在项目中使用了Vuex，可以在store中定义一个state来存储图片地址，并在需要使用图片的地方通过Getter获取图片地址。

// store.js
const store = new Vuex.Store({
  state: {
    baseUrl: 'https://example.com/images/'
  },
  getters: {
    getImageUrl: state => (imageName) => {
      return state.baseUrl + imageName;
    }
  }
});

// 在组件中使用
<template>
  <img :src="imageUrl('image.jpg')" />
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'getImageUrl'
    ])
  },
  methods: {
    imageUrl(imageName) {
      return this.getImageUrl(imageName);
    }
  }
}
</script>