Vue2中使用v-for无法展示文件夹内图片的问题求助

我是Vue新手，网站内存储了两张图片，v-for已将数据正确分配到databaseListItem中，图片的服务器物理路径为/opt/lampp/htdocs/products_db/stored_images/cms.png。使用Vue2开发，希望通过v-for结合插值语法展示图片，但尝试多种方式均无效，相关代码如下：

HTML代码 #

<tr v-for="show_all_item in databaseListItem">
    <!--first attempt, required not declared-->
    <!-- <img :src="require(`@/htdocs/products_db/stored_images/${show_all_item.itemimage}`)" />     -->

    <!--second attempt, itemimage not decalred-->
    <!-- <img :src="`/products_db/stored_images/${show_all_item.itemimage}`"> -->
    <!--wrong--> 
    <img :src="{{show_all_item.itemimage}}" />

 
    <td scope="row">[Name]</td>
    <td scope="row">[Code]</td>
    <td scope="row">[Spec]</td>
    <td scope="row">[Spec]</td>
</tr>

Vue JS代码 #

new Vue({
el: "#app",
data() {
  return {
    databaseListItem: [],
    inputt_item: {itemname: "", itemcode: "", itemdescription: "", itemvariant: "", 

      itemimage: "", itemts: ""}, //itemimage存储图片名称，例如cms.png

    selected: {}
  };
},

错误分析 #

• :src绑定语法错误：使用:src（动态属性绑定）时，不能嵌套{{}}插值语法。:src本身接收JavaScript表达式，直接写变量或拼接逻辑即可，嵌套插值会导致语法错误。
• require路径不适用：第一种尝试中@指向Vue项目的src目录，而你的图片存储在服务器根目录htdocs下，不属于项目源码目录，无法通过require引入。
• URL路径未验证：第二种尝试的路径未确认是否能通过浏览器直接访问，需区分服务器物理路径和前端可访问的URL路径。

解决方案 #

1. 验证图片可访问性：在浏览器地址栏输入http://你的域名/products_db/stored_images/cms.png，若能正常显示图片，说明URL路径正确。
2. 修正img标签的src绑定：
   方式一（模板字符串）：

   <img :src="`/products_db/stored_images/${show_all_item.itemimage}`" alt="产品图片">
   

   方式二（字符串拼接）：

   <img :src="'/products_db/stored_images/' + show_all_item.itemimage" alt="产品图片">
   

3. 确认数据正确性：通过Vue开发者工具检查databaseListItem数组中每个对象的itemimage字段是否确实存储了正确的图片文件名（如cms.png）。

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