Vue.js构建图片画廊时动态绑定的本地图片无法加载

这个问题确实是构建工具的静态资源处理逻辑导致的：

• 当你直接在template里给<img>标签写静态src属性时，Webpack/Vite会在编译阶段识别到这个相对路径的资源，自动完成资源hash重命名、路径替换，最终输出可正常访问的编译后地址
• 但你把相对路径以普通字符串形式写在data()的JS逻辑中时，构建工具默认不会将这个字符串识别为静态资源依赖，不会做路径转换处理。页面运行时浏览器拿到的还是你手写的原始相对路径，和编译后资源的实际存放路径不匹配，自然加载失败。外链图片本身是绝对HTTP地址，不需要经过本地构建处理，所以可以正常显示。

根据你项目使用的构建工具选择对应写法即可：

方案1：使用require()引入（适配Vue CLI/Webpack构建的项目） #

将本地资源路径用require()包裹，构建阶段会自动解析对应资源的真实路径：

data() {
  return {
    images: [
      require("../assets/images/photos/bathroom/bathroom-1.png"),
      "https://外部图片示例地址.jpg",
    ],
  };
},

如果需要批量引入同目录下的多张本地图片，还可以使用require.context实现批量导入，无需逐张手写路径。

方案2：使用new URL()构造地址（适配Vite构建的项目，兼容Webpack 5+） #

Vite默认不支持CommonJS规范的require语法，使用原生URL构造方法即可让构建工具识别到资源依赖：

data() {
  return {
    images: [
      new URL("../assets/images/photos/bathroom/bathroom-1.png", import.meta.url).href,
      "https://外部图片示例地址.jpg",
    ],
  };
},

方案3：将静态资源放入public目录 #

如果不想在引入资源时写特殊语法，可以将需要用到的图片挪到项目根目录的public文件夹下，引用时直接写以/开头的根路径即可。构建工具不会处理public目录下的文件，会按原目录结构直接输出到打包产物中：

data() {
  return {
    images: [
      "/images/photos/bathroom/bathroom-1.png", // 对应路径为 public/images/photos/bathroom/bathroom-1.png
      "https://外部图片示例地址.jpg",
    ],
  };
},

注意：该方案引入的资源不会自动添加内容hash，资源更新时需要手动处理浏览器缓存问题。

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