Laravel+Vue中使用v-for调用Storage链接图片src无效问题

你的问题核心是循环里的图片路径解析错误，以下是具体原因和解决方法：

错误原因 #

• 用{{ url('storage/images/validations/emv.card_image') }}时，Laravel的Blade模板会把emv.card_image当成固定字符串，生成的URL是storage/images/validations/emv.card_image，而不是循环项中emv.card_image对应的真实图片文件名。
• 即便用:src，如果写法错误，也无法正确识别Vue的响应式变量。

正确写法 #

方法一：提前定义Storage基础URL，Vue拼接变量 #

先在页面中通过Blade获取Storage的基础路径，再在Vue中拼接每个循环项的图片名：

<!-- 在页面脚本前定义基础URL -->
<script>
const storageValidationUrl = "{{ url('storage/images/validations/') }}";
</script>

<!-- 循环内的图片标签 -->
<div class="custom" v-for="(emv, index) in emvdetailsdata" :key="emv.evd_id">
  <img width="300px" v-else :src="`${storageValidationUrl}/${emv.card_image}`" alt="Red dot" />
</div>

方法二：直接在:src中拼接Blade URL与Vue变量 #

通过模板字符串将Blade生成的基础路径和Vue变量拼接：

<div class="custom" v-for="(emv, index) in emvdetailsdata" :key="emv.evd_id">
  <img width="300px" v-else :src="`{{ url('storage/images/validations/') }}/${emv.card_image}`" alt="Red dot" />
</div>

额外检查项 #

• 确认emv.card_image的值是完整的图片文件名（比如20221013192153-cvd-card-image-160310009-0155-00161.png），而非空值或错误路径。
• 可以在Vue开发者工具中查看emvdetailsdata，验证每个循环项的card_image字段是否正确。
• 检查图片是否存在于storage/app/public/images/validations/目录下（php artisan storage:link映射的是storage/app/public到public/storage）。

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