我是新的Vuejs。我有两张图片存储在我的网站。v-为正确分配databaseListItem
内的信息。路径是/opt/lampp/htdocs/products_db/stored_images/cms.png
html是vue 2自带的,我想用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>
databaseListItem在myjs中使用vue排序。因此它已经在inputt_item.itemimage(cms.png)中正确命名。
new Vue({
el: "#app",
data() {
return {
databaseListItem: [],
inputt_item: {itemname: "", itemcode: "", itemdescription: "", itemvariant: "",
itemimage: "", itemts: ""}, //itemimage stored the name of the image ex. cms.png
selected: {}
};
},
这两个尝试都不正确,我怎么能只使用v-for并显示正确的路径为我存储的图像?我尝试使用img标签和v-img,但仍然没有显示?任何问题,我的代码?任何帮助将不胜感激。
1条答案
按热度按时间58wvjzkj1#
试一下
如下图所示:https://stackoverflow.com/a/57567343/8816585
另外,请记住,mustache语法(aka
{{ }}
)仅用于实际文本,而不用于HTML属性。PS:假设您在
itemimage
中正确地具有cms.png
。