<image :src="`${url}`+ tableData.url"></image> GET http://localhost:8081/img/AllCommodity/undefined 404 已经定义了,显示拿不到
时间: 2023-08-22 11:07:59 浏览: 32
看起来你的`tableData`对象中的`url`属性没有被正确地赋值。请检查一下`tableData`对象是否被正确地初始化,以及`url`属性是否被正确地赋值。如果`url`属性的值为`undefined`,那么在拼接图片链接时就会出现错误。你可以使用`console.log()`语句来打印`tableData`对象以及`url`属性的值,以便更好地排查问题。
相关问题
<image :src="url"></image>,data() { return { // 获取单个商品总数据 async getCommodity(query) { const res = await uni.$http.get('/commodity/getCommodityById', { id: query }) if (res.data.code == 200) { this.tableData = res.data.data // this.tableData.url = 'http://localhost:8081/img/AllCommodity/' + this.tableData.url this.url = `http://localhost:8081/img/AllCommodity/${this.tableData.url}` console.log(this.url); console.log(typeof (this.url)); } else { uni.showLoading({ title: '数据获取失败', icon: 'error' }); setTimeout(function () { uni.hideLoading(); }, 1000); } },这是代码,图片不出来,是什么问题 //总数据 tableData: {}, url: '', //商品所有权是否存在 } }; },,
根据你提供的代码,问题可能出在以下几个方面:
1. 确认图片的路径是否正确
代码中有一段注释掉的代码:
```javascript
// this.tableData.url = 'http://localhost:8081/img/AllCommodity/' + this.tableData.url
```
这段代码尝试给图片路径加上了前缀,但是被注释掉了。请检查图片在服务器上的存放路径是否正确,如果不正确需要修改路径。
2. 确认图片是否存在
在控制台中打印出来的图片路径是否正确?如果路径正确,那么可能是因为图片不存在或者服务器无法访问到图片,导致图片无法显示。
3. Vue中的图片加载问题
如果以上两个问题都没有解决问题,那么可能是Vue中的图片加载问题。Vue在加载图片时,需要使用v-bind指令将图片路径绑定到src属性上。你可以将代码修改为:
```html
<image :src="url"></image>
```
这样就可以正确地在页面上显示图片了。
<div class="layui-container"> <div class="hot-sell" v-if="bookAll.length > 0"> <div class="layui-row layui-col-space20"> <table> <tr> <td v-for="(bk,index) in bookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px"> <a :href="'detail?id='+bk.bookId" class="text"> <div><img :src="'/BookShopSystem_war/' + bk.image1"></div> <p>{{bk.bookName}}</p> <p class="price">¥{{bk.bookPrice}}</p> </a> </td> </tr> </table> </div> </div> </div> <div id="houseList"></div> //列表页——分页 layui.use(['laypage'], function () { var laypage = layui.laypage; laypage.render({ elem: 'houseList' , count: 25 , limit: 5 , theme: '#daba91' , layout: ['page', 'next'] }); }); Vue.config.productionTip = false //阻止vue在启动时生成生产提示 new Vue({ el: "#app", data() { return { bookAll: [] } }, mounted() { var _this = this; axios({ method: 'get', url: 'http://localhost:8080/BookShopSystem_war/getBookAll' }).then(function (result) { var code = result.data.code; var data = result.data.data; if (code == 0) { _this.bookAll = data; } console.log(data) }) } })已省略部分代码,数据都可遍历出来,如何实现分页功能
在Vue中实现分页功能可以使用第三方库,比如element-ui和iview等,也可以使用layui等前端框架的自带分页组件。下面给出使用layui的示例代码:
HTML代码:
```
<div class="layui-container">
<div class="hot-sell" v-if="bookAll.length > 0">
<div class="layui-row layui-col-space20">
<table>
<tr>
<td v-for="(bk,index) in currentBookAll" :key="index" class="layui-col-xs2" style="margin-left: 30px">
<a :href="'detail?id='+bk.bookId" class="text">
<div><img :src="'/BookShopSystem_war/' + bk.image1"></div>
<p>{{bk.bookName}}</p>
<p class="price">¥{{bk.bookPrice}}</p>
</a>
</td>
</tr>
</table>
</div>
</div>
</div>
<div id="houseList"></div>
```
Vue代码:
```
new Vue({
el: "#app",
data() {
return {
bookAll: [],
currentBookAll: [],
page: {
count: 0,
limit: 5,
curr: 1
}
}
},
mounted() {
var _this = this;
axios({
method: 'get',
url: 'http://localhost:8080/BookShopSystem_war/getBookAll'
}).then(function (result) {
var code = result.data.code;
var data = result.data.data;
if (code == 0) {
_this.bookAll = data;
_this.page.count = Math.ceil(_this.bookAll.length / _this.page.limit);
_this.changePage(1);
}
})
},
methods: {
changePage(curr) {
var start = (curr - 1) * this.page.limit;
var end = curr * this.page.limit;
this.currentBookAll = this.bookAll.slice(start, end);
this.page.curr = curr;
layui.use(['laypage'], function () {
var laypage = layui.laypage;
laypage.render({
elem: 'houseList',
count: this.page.count,
limit: this.page.limit,
curr: this.page.curr,
theme: '#daba91',
layout: ['page', 'next'],
jump: function (obj, first) {
if (!first) {
_this.changePage(obj.curr);
}
}
});
});
}
}
})
```
上述代码中,通过计算总页数和当前页数据的起止索引,实现了分页功能。在changePage方法中,使用slice方法截取当前页的数据,并通过laypage组件渲染分页控件。在laypage的jump回调函数中,调用changePage方法更新当前页数据。