v-for循环中v-bind:src绑定imageURL属性不生效问题求助

问题根因 #

• Vue项目的构建工具（webpack/vite）只会处理模板里直接写的静态路径、被require包裹、或者提前import的静态资源，你直接在data中写的相对路径字符串不会被解析，打包后路径会失效，导致图片无法加载。

修复方案 #

方案1：require包裹路径（适用Vue CLI/Webpack项目） #

修改data中imageURL的赋值，用require包裹相对路径，触发构建工具的资源解析：

data() {
    return {
      projects: [
        {
          id: this.projectId,
          title: "Minimalist Portfolio",
          about: "...",
          imageURL: require("./minimalist-porfolio-desktop.png"),
          routeName: "Minimalist Portfolio",
        },
      ],
    };
  },

方案2：提前导入图片（全场景通用，兼容Vite/Webpack） #

在脚本顶部先导入图片资源，再赋值给imageURL：

// 脚本开头导入资源
import portfolioImg from "./minimalist-porfolio-desktop.png"

export default {
  data() {
    return {
      projects: [
        {
          id: this.projectId,
          title: "Minimalist Portfolio",
          about: "...",
          imageURL: portfolioImg,
          routeName: "Minimalist Portfolio",
        },
      ],
    };
  },
}

方案3：public目录托管（适合无需编译的静态资源） #

如果你的图片放在项目根目录的public文件夹下，直接写相对于public目录的绝对路径即可：

// 示例：图片存放在public/assets/目录下
imageURL: "/assets/minimalist-porfolio-desktop.png"

内容的提问来源于stack exchange，提问作者Pedro Henrique Alves Moura