Nuxt 2.15组件如何从JSON加载图片？解决显示异常问题

针对assets目录下的图片 #

Nuxt 2 中assets目录的资源会被 Webpack 编译处理，动态绑定 src 时不能直接用字符串路径，必须通过require()加载：

• 确保你的dataProjects.json里的urlImg是相对于assets的路径，比如：

  {
    "projects": [
      { "urlImg": "images/project-01.jpg" }
    ]
  }
  

• 子组件<ThemProject.vue>中绑定 src 时，用require()拼接路径：

  <template>
    <img :src="require(`@/assets/${project.urlImg}`)" alt="项目封面">
  </template>
  
  <script>
  export default {
    props: ['project']
  }
  </script>
  

  要是 json 里的路径已经带@/assets/前缀，直接写require(project.urlImg)即可。

针对public目录下的图片 #

public目录的资源是静态资源，直接基于根路径绑定即可，无需require：

• json 里的urlImg用根路径开头，比如：

  {
    "projects": [
      { "urlImg": "/images/project-01.jpg" }
    ]
  }
  

• 子组件直接绑定：

  <template>
    <img :src="project.urlImg" alt="项目封面">
  </template>
  
  <script>
  export default {
    props: ['project']
  }
  </script>
  

快速排查技巧 #

1. 把硬编码能显示的路径直接复制到dataProjects.json里，再对应上面的方式调整绑定代码
2. 打开浏览器控制台的「网络」面板，查看图片请求的路径是否404，根据错误路径修正 json 里的路径或者绑定逻辑

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