如何修改Vuetify摄影主题标准版配置从本地Images文件夹加载图库图片

操作步骤 #

1. 首先在项目静态资源目录（Vue2/Vue3 CLI、Vite搭建的项目均默认是public目录）下新建Images文件夹，把你需要用到的所有图库图片放入该文件夹，建议将图片按序号重命名，比如1.jpg、2.jpg……30.jpg，方便批量配置。
2. 修改photographs.js文件里的pictures数组生成逻辑，把原来的Picsum远程链接替换成本地图片路径即可，修改后的完整代码如下：

import { make } from 'vuex-pathify'

// 按你实际的图片后缀修改，jpg/png/webp都可以
const IMAGE_SUFFIX = '.jpg'
const categories = [
  'All',
  'Interior',
  'Buildings',
  'Fashion',
  'Nature',
  'Lifestyle',
]

const state = {
  categories,
  filter: 'All',
  picture: null,
  pictures: Array.from({ length: 30 }).map((_, index) => {
    // index从0开始，所以+1和你命名的1~30对应
    const imageId = index + 1
    return {
      src: `/Images/${imageId}${IMAGE_SUFFIX}`,
      category: categories[Math.floor(Math.random() * categories.length)],
    }
  }),
}

const mutations = make.mutations(state)

export default {
  namespaced: true,
  state,
  mutations,
}

3. 如果你的图片不是按序号命名，也可以提前把所有图片名存成数组，直接遍历生成即可，示例：

// 提前列好所有本地图片的文件名
const localImages = [
  'interior-1.jpg',
  'building-3.png',
  'nature-2.webp',
  // 把剩下的27个文件名补全即可
]

// 生成pictures数组的时候直接取对应位置的文件名
pictures: localImages.map(imgName => {
  return {
    src: `/Images/${imgName}`,
    category: categories[Math.floor(Math.random() * categories.length)],
  }
})

注意事项 #

• 路径的大小写要和你实际创建的文件夹、文件名完全一致，否则会出现404无法加载图片的问题
• 如果你用的是Nuxt类的框架，静态资源目录是static，只需要把Images文件夹建在static目录下即可，路径写法和上面一致

内容的提问来源于stack exchange，提问作者Giugiaro