Question

在中具体显示路径时，将显示图像。但是当我循环通过与上面的工作示例相同的路径数组时，图像显示为小图标或根本不起作用。我相信这可能是由于在运行时/加载时加载静态图像引起的。

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

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（评估于./src/components/online_services/bce_online递归^。* $（app.js：6581），：34：9）

Answer 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>

Answer 2

尝试一下：

 <com.hadiidbouk.charts.ChartProgressBar
        android:id="@+id/chart_progress_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center"
        app:hdBarCanBeClick="true"
        app:hdBarHeight="170dp"
        app:hdBarWidth="7dp"
        app:hdBarRadius="10dp"
        app:hdMaxValue="10"
        app:hdEmptyColor="@color/empty"
        app:hdProgressColor="@color/progress"
        app:hdProgressClickColor="@color/progress_click"
        app:hdPinBackgroundColor="@color/pin_background"
        app:hdPinTextColor="@color/pin_text"
        app:hdPinPaddingBottom="5dp"
        app:hdBarTitleColor="@color/bar_title_color"
        app:hdBarTitleTxtSize="12sp"
        app:hdPinTxtSize="17sp"
        app:hdPinMarginTop="10dp"
        app:hdPinMarginBottom="55dp"
        app:hdPinMarginEnd="22dp"
        app:hdPinDrawable="@drawable/ic_pin"
        app:hdBarTitleMarginTop="9dp"
        app:hdProgressDisableColor="@color/progress_disable"/>

按路径加载静态图像（Vue.js）

2 个答案: