Vue.js 2显示图片问题：Laravel 5.5 API中图片存放与访问方式

刚好我之前也做过Vue2+Laravel5.5的SPA项目，给你梳理下图片存放和访问的思路：

1. 首选：public 目录下的子文件夹 #

Laravel的public目录是Web服务器对外暴露的根目录，所有放在这里的文件都能直接通过URL访问，非常适合存放前端需要的静态图片。你可以在public下新建一个images文件夹（或者按业务分类建子文件夹，比如public/avatars、public/posts），把图片直接丢进去就行，比如public/images/avatar.jpg。

2. 可选：storage 目录（需创建软链接） #

如果你的图片是用户上传的动态资源，或者需要更安全的存储（比如不想直接暴露在public目录），可以放在storage/app/public目录下。但这个目录默认无法直接通过Web访问，所以需要执行Laravel的命令创建软链接，把它映射到public/storage：

php artisan storage:link

执行完后，storage/app/public/images/photo.png就可以通过/storage/images/photo.png这个URL访问了。

1. 直接写绝对路径（最常用） #

因为public是Web根目录，所以在Vue模板里直接写绝对路径就能访问到图片：

<template>
  <img src="/images/avatar.jpg" alt="用户头像">
</template>

如果是用storage软链的图片，路径就是/storage/images/photo.png。

2. 动态绑定路径（适配API返回的地址） #

如果图片地址是从Laravel API接口返回的（比如文章封面图的地址），直接用Vue的动态绑定语法就行：

<template>
  <img :src="article.image_path" alt="文章封面">
</template>

<script>
export default {
  data() {
    return {
      article: {}
    }
  },
  mounted() {
    // 调用Laravel API获取文章数据
    this.$axios.get('/api/articles/1')
      .then(res => {
        this.article = res.data;
        // 假设API返回的image_path是 "/images/post_cover.jpg"
      })
  }
}
</script>

3. 前端资源目录存放（适合小图标） #

如果你有一些小图标、UI素材想打包到前端资源里，也可以放在Vue项目的src/assets目录下，然后通过require引入：

<template>
  <img :src="logoUrl" alt="站点logo">
</template>

<script>
export default {
  data() {
    return {
      logoUrl: require('@/assets/logo.png')
    }
  }
}
</script>

不过这种方式会把图片打包到前端的dist文件里，增加包体积，所以更推荐把大图片放在Laravel的public目录。

注意事项 #

• 确保Web服务器的根目录指向Laravel的public文件夹，不然静态资源会访问不到。
• 不要在Laravel的路由里拦截静态资源的请求，默认情况下Web服务器会直接处理public目录下的文件，不需要Laravel介入。

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