按路径加载静态图片 (Vue.js)答案

【问题标题】：Load static images by path (Vue.js)按路径加载静态图片 (Vue.js)
【发布时间】：2019-07-30 20:16:20
【问题描述】：

当专门显示路径时，会显示一个图像，但是当我循环浏览与上面的工作示例相同的路径数组时，图像显示为小图标或根本不起作用。我相信这可能是由于在运行时/加载时加载静态图像引起的。

我尝试过创建一个方法（接受完整路径）

getImgUrl(pic) {

    var images = require.context('', false, /\.png$/)

    return images('' + pic)

}

这是我为 i_data 中的每个路径在每个单元格中放置图像的代码

<td class="data_cell"  v-for="image, index in i_data"> 

  <div class="img_cell">

    <img src='../../../../PHOTOS/3852034250/61117-00-061568/act2.jpg' 
    width="160" max-height="220px"/> (SHOWS IMAGE)

     {{i_data[index][2]}} (SHOWS PATH OF EACH IMAGE)

     <img :src="i_data[index][2]" width="160" max-height="220px"/> (NO IMAGE - SMALL ICON)

     <!-- <img :src="require(`${i_data[index][2]}`)"/> --> (ERROR MESSAGE 1)

  </div>

<td>



i_data = [["act2", "2019-05-31 08:15:25", 
           "../../../../PHOTOS/3852034250/61117-00-061568/act2.jpg"],
          ["doggo", "2019-05-28 15:34:21", 
           "../../../../PHOTOS/3852034250/61117-00-061568/doggo.jpg"],
          ["Test", "2019-07-30 10:39:56", 
           "../../../../PHOTOS/3852034250/61117-00-061568/Test.jpg"],
          ["tree 2", "2019-07-24 10:31:25", 
           "../../../../PHOTOS/3852034250/61117-00-061568/tree.jpg"],
          ["tree", "2019-06-27 14:46:50", 
           "../../../../PHOTOS/3852034250/61117-00-061568/tree2.jpg"]]

错误消息 1：

找不到模块“../../../../PHOTOS/3852034250/61117-00-061568/act2.jpg”。在 webpackContextResolve (eval at ./src/components/online_services/bce_online recursive ^.*$ (app.js:6581), :34:9)

【问题讨论】：

在你的标签上，属性 src 应该使用 v-bind 或 ":" 绑定，然后必须这样：:src="image"
我以为我在这一行使用了 v-bind ，你能说得更具体点吗？
你试过不使用 require() 吗？也 v-for="image, index in i_data" 应该是 v-for="(image, index) in i_data"，并且为了更好的易读性 i_data 应该是一个对象数组

标签： html vue.js

【解决方案1】：

尝试这样做：

Vue.config.devtools = false
Vue.config.productionTip = false

new Vue({
  el: "#app",
  data: {
    i_data: [
      {
        name: "act2",
        date: "2019-05-31 08:15:25",
        path: "https://via.placeholder.com/300/0000FF"
      },
      {
        name: "doggo",
        date: "2019-05-28 15:34:21",
        path: "https://via.placeholder.com/300/00FF00"
      },
      {
        name: "Test",
        date: "2019-07-30 10:39:56",
        path: "https://via.placeholder.com/300/FF0000"
      }
    ]
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div class="data_cell" v-for="(image, index) in i_data">
      <div class="img_cell">

          {{ image.name }} {{ image.date }}

          <img :src="image.path" width="160" max-height="220px" />

          <img :src="image.path" />
      </div>
  </div>
</div>

【讨论】：

所以我对这个答案的问题是我的路径是从一个 php 文件生成的，该文件从某个文件夹中保存的图像中获取所有图像路径，所以我没有明确地拥有它们索引我的数据结构。
名称和日期也是通过对我的数据库的 axios 请求生成的，该请求将它们保存到 i_data 中，所以我没有明确地拥有它们而不进行一些提取。你觉得我还能用你的方法吗？
当然，您应该使用 json_encode 将数据作为关联数组返回。

【解决方案2】：

试试这个：

<img :src="require('../../../../PHOTOS/3852034250/61117-00-061568/act2.jpg')" 
width="160" max-height="220px"/>

【讨论】：