Vue.js中v-bind无法加载本地图片问题求助

问题核心：本地图片的相对路径在v-bind动态绑定中未被Webpack正确解析，导致资源路径错误；而CDN链接是绝对路径，所以能正常加载。以下是几种可行的解决办法：

方法1：用require()包裹本地路径 #

通过require()让Webpack识别并处理本地资源，修改数据列表如下：

export default {
  data: () => ({
    skillTech: [
      { title: "HTML5", rating: 4, logo: "https://cdn-icons-png.flaticon.com/512/732/732212.png" },
      { title: "CSS3", rating: 4, logo: require("../assets/css.svg") }, // 替换为对应文件名
      { title: "JavaScript", rating: 4, logo: require("../assets/js.svg") },
      { title: "Vue.js", rating: 3, logo: require("../assets/vue.svg") },
    ],
  })
}

注意：确保../assets/目录下存在对应技术的图标文件，你当前代码里统一写的html.svg，记得改成对应文件名。

方法2：将图片移到public目录，使用绝对路径 #

把图片放到项目根目录的public文件夹（比如public/assets/css.svg），然后用根路径访问：

export default {
  data: () => ({
    skillTech: [
      { title: "HTML5", rating: 4, logo: "https://cdn-icons-png.flaticon.com/512/732/732212.png" },
      { title: "CSS3", rating: 4, logo: "/assets/css.svg" },
      { title: "JavaScript", rating: 4, logo: "/assets/js.svg" },
      { title: "Vue.js", rating: 3, logo: "/assets/vue.svg" },
    ],
  })
}

此方式下，Webpack不会处理public内的资源，直接以根路径访问即可。

方法3：提前导入图片资源 #

在脚本开头先导入所需图片，再赋值给logo字段：

import cssIcon from "../assets/css.svg"
import jsIcon from "../assets/js.svg"
import vueIcon from "../assets/vue.svg"

export default {
  data: () => ({
    skillTech: [
      { title: "HTML5", rating: 4, logo: "https://cdn-icons-png.flaticon.com/512/732/732212.png" },
      { title: "CSS3", rating: 4, logo: cssIcon },
      { title: "JavaScript", rating: 4, logo: jsIcon },
      { title: "Vue.js", rating: 3, logo: vueIcon },
    ],
  })
}

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