使用動態創建的src路徑在引導表行的單元格中顯示圖像

Question

我有一些引導表，用於動態顯示從JSON解析的某些項目的信息。 該表將包含的字段是靜態的，我正在嘗試使圖像顯示在表的一列中。 所有圖像都包含在本地項目中。 我想發生的事情是對於表中解析並顯示的每個項目，將計算一個包含指向正確圖像的src路徑的字符串，並且將為表中的每個對象顯示每個項目的正確圖像。

當前，代替在表格中顯示的圖像，而是顯示占位符字符串“ [object HTMLImageElement]”。 我已經查看了關於StackOverflow的許多問題，這些問題和答案與所顯示的文本而不是圖像有關，但是我看到的帖子與具有固定圖像源且不會改變的靜態網頁有關。

從JSON解析項目時，我保存了相關信息並創建了被推入項目數組的項目對象，然后將其顯示在表中。 當查看控制台日志時，我大約90％確信正確創建了每個圖像的動態路徑，並且對於獲取圖像資源時發出的每個GET請求，都會收到304 Not Modified響應。

作為參考，項目圖像使用以下文件結構存儲在我的項目中：src / assets / items-icons / itemIdHere .png

以下是我使用的函數以及在其中構建使用該函數構建表的示例vue組件。

/**
 * Use Axios to request and save the latest item summary from the OSBuddy API.
 * Uses the apiUrl const declared above and saves the results in itemSummary.
 */
export function generateTable (theItemSummary, theItemIdList, theItems) {
  console.log('Fetching the latest summary.')
  axios.get(apiUrl)
    .then(response => {
      console.log('Retrieved the latest item summary.')
      theItemSummary = JSON.parse(JSON.stringify(response.data))
      parseItems(theItemSummary, theItemIdList, theItems)
    })
    .catch(error => {
      console.log('Error getting the latest summary: ' + error)
    })
}

/**
 * Helper function for generateTable(). Takes the entire item summary and attempts
 * to save the desired values from each nested object, then saves the results inside
 * the items array for display in the table.
 */
export function parseItems (theItemSummary, theItemIdList, theItems) {
  const imagePrefix = '../../assets/items-icons/'
  const imageSuffix = '.png'

  if (theItemSummary) {
    let currItem // Current item from the itemIDList.
    for (let i = 0; i < Object.keys(theItemSummary).length; i++) {
      let computedItem = {}
      currItem = theItemIdList[i]
      // Get the up to date info from the item summary for each particular item.
      computedItem.itemName = theItemSummary[currItem].name

      // Save the item icon as a property of the computed item.
      let itemImage = new Image()
      itemImage.src = imagePrefix + String(theItemSummary[currItem].id) + imageSuffix
      computedItem.itemIcon = itemImage

      // Find the buying value of the current item. Inactive prices are left undefined.
      if (theItemSummary[currItem].buy_average.valueOf() === 0) {
        computedItem.buyPrice = 'Inactive'
      } else {
        computedItem.buyPrice = theItemSummary[currItem].buy_average
      }

      // Find the selling value of the current item. Inactive prices are left undefined.
      if (theItemSummary[currItem].sell_average.valueOf() === 0) {
        computedItem.sellPrice = 'Inactive'
      } else {
        computedItem.sellPrice = theItemSummary[currItem].sell_average
      }

      // Calculate the margin of the item. Leave it undefined if either prices are inactive.
      if (computedItem.buyPrice === 'Inactive' || computedItem.sellPrice === 'Inactive') {
        computedItem.margin = 'Unknown'
      } else {
        computedItem.margin = computedItem.sellPrice - computedItem.buyPrice
      }

      if (String(theItemSummary[currItem].members).includes('true')) computedItem.isMembers = 'Members'
      else computedItem.isMembers = 'Free to Play'

      // Store the item into the items list.
      theItems.push(computedItem)
    }

    console.log('Successfully parsed the item summary.')
  } else {
    console.log('Error: Attempted to parse undefined item summary.')
  }
}

這是Vue組件示例：

<template>
  <b-container>
    <div id="header">
      <header>Fish</header>
    </div>

    <div id="table">
      <b-table
        striped
        dark
        :items="items"
        :fields="fields">

      </b-table>
    </div>
  </b-container>
</template>

<script>
import * as table from '../../tableFunctions'

const fishIdList = [ 317, 315, 327, 325, 345, 347, 321, 319, 353, 355, 335, 333, 341, 339, 349,
  351, 331, 329, 359, 361, 10138, 10136, 5001, 5003, 377, 379, 363, 365, 371, 373, 7944,
  7946, 3142, 3144, 383, 385, 395, 397, 389, 391, 13439, 13441, 11934, 11936 ]

export default {
  data () {
    return {
      // The summary generated and retrieved from the OSBuddy API.
      itemSummary: undefined,

      // Array containing the item ID of every item we want to display in the table.
      itemIdList: fishIdList,

      // List of all items accessed from the itemSummary, meant to display in table.
      items: [],

      // Fields for use at the table header.
      fields: {
        itemIcon: {
          sortable: false
        },

        itemName: {
          label: 'Item Name',
          sortable: true
        },

        buyPrice: {
          label: 'Buy Price',
          sortable: true
        },

        sellPrice: {
          label: 'Sell Price',
          sortable: true
        },

        margin: {
          label: 'Margin',
          sortable: true
        },

        isMembers: {
          label: 'Members Item',
          sortable: true
        }
      }
    }
  },

  mounted () {
    table.generateTable(this.itemSummary, this.itemIdList, this.items)
  }
}

</script>

<style scoped>

header {
  font-size: 32px;
}

table {
  color: whitesmoke;
  font-size: 18px;
  }
</style>

最后，如果它完全可以幫助描述我的問題，那么這里是指向該表的當前狀態及其顯示方式的鏈接。

Answer 1

b表默認情況下轉義自定義html。 您需要使用自定義的數據范圍的插槽（如圖像）的描述呈現在這里 。 我想您的案例代碼將是這樣的：

<b-table
    striped
    dark
    :items="items"
    :fields="fields">
    <template slot="[itemIcon]" slot-scope="data">
        <img :src="data.value" />
    </template>
</b-table>

還可以從中更改計算出的itemIcon：

// Save the item icon as a property of the computed item.
let itemImage = new Image()
itemImage.src = imagePrefix + String(theItemSummary[currItem].id) + imageSuffix
computedItem.itemIcon = itemImage

到這個：

// Save the item icon as a property of the computed item.
computedItem.itemIcon = imagePrefix + String(theItemSummary[currItem].id) + imageSuffix

因此，calculatedItem.itemIcon僅保存圖像源，而不包含“ new Image（）”實例。

如果無法使用，請提供jsfiddle / codepen，以便人們可以更輕松地進行挖掘。