我试图从我的JSON文件在VUE渲染图像,但它不工作是使一个产品详细信息页面和显示每个产品的详细信息取决于该页面上选择的一个...所以这是该页面的代码。我已经尝试使用要求功能来加载图像,但它仍然没有。图像是在我的图像文件夹下的资产文件夹...这里是代码..
`<template>
<Header />
<div class="title">
<h1>Product Description</h1>
</div>
<div class="container mb-5">
<hr />
<div class="card">
<div class="row">
<aside class="col-sm-5 border-right">
<article class="gallery-wrap">
<div class="img-big-wrap">
<div>
<img :src="require(`../assets/images/${product.image}`)" />
</div>
</div>
<!-- slider-product.// -->
<!-- slider-nav.// -->
</article>
<!-- gallery-wrap .end// -->
</aside>
<aside class="col-sm-7">
<article class="card-body p-5">
<h3 class="title mb-3">{{ product.name }}</h3>
<p class="price-detail-wrap">
<span class="price h3 text-warning">
<span class="currency">US $</span
><span class="num">{{ product.price }}</span>
</span>
</p>
<!-- price-detail-wrap .// -->
<dl class="item-property">
<dt>Description</dt>
<dd>
<p>
{{ product.description }}
</p>
</dd>
</dl>
<dl class="param param-feature">
<dt>Model#</dt>
<dd>12345611</dd>
</dl>
<!-- item-property-hor .// -->
<dl class="param param-feature">
<dt>Color</dt>
<dd>Black and white</dd>
</dl>
<!-- item-property-hor .// -->
<dl class="param param-feature">
<dt>Delivery</dt>
<dd>Russia, USA, and Europe</dd>
</dl>
<!-- item-property-hor .// -->
<hr />
<div class="row">
<div class="col-sm-5">
<dl class="param param-inline">
<dt>Quantity:</dt>
<dd>
<select
class="form-control form-control-sm"
style="width: 70px"
>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</dd>
</dl>
<!-- item-property .// -->
</div>
<!-- col.// -->
<div class="col-sm-7">
<dl class="param param-inline">
<dt>Size:</dt>
<dd>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2"
/>
<span class="form-check-label">SM</span>
</label>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2"
/>
<span class="form-check-label">MD</span>
</label>
<label class="form-check form-check-inline">
<input
class="form-check-input"
type="radio"
name="inlineRadioOptions"
id="inlineRadio2"
value="option2"
/>
<span class="form-check-label">XXL</span>
</label>
</dd>
</dl>
<!-- item-property .// -->
</div>
<!-- col.// -->
</div>
<!-- row.// -->
<hr />
<a href="#" class="btn btn-lg btn-outline-primary text-uppercase">
<i class="fas fa-shopping-cart"></i> Add to cart
</a>
</article>
<!-- card-body.// -->
</aside>
<!-- col.// -->
</div>
<!-- row.// -->
</div>
<!-- card.// -->
</div>
<!--container.//-->
<Footer />
</template>
<script>
import Header from "./Header";
import axios from "axios";
import Footer from "./Footer";
export default {
name: "ProductDetail",
components: {
Header,
Footer,
},
data() {
return {
product: {},
};
},
async mounted() {
let result = await axios.get(
"http://localhost:3000/products/" + this.$route.params.id
);
this.product = result.data;
},
};
</script>
<style scoped>
/* Import Font Dancing Script */
@import url(https://fonts.googleapis.com/css?family=Dancing+Script);
.title {
font-family: "Dancing Script", cursive;
padding-top: 15px;
left: 45%;
}
body {
font-family: Arial;
}
</style>`
{
"products": [
{
"id": 1,
"name": "shirt",
"price": "40",
"description": "Product shirt",
"image": "f2.jpg",
"reviews": [
{ " id": 1, " comment": "Good product" },
{ "id": 2, "comment": "Excellent product" },
{ " id": 3, "comment": "Average product" }
]
},
{
"id": 2,
"name": "shirt",
"price": "40",
"description": "Product shirt",
"image": "f1.jpg",
"reviews": [``{ " id": 3, "comment": "Average product" }
]
}
]
}
I expect the image to be rendered on my product detail page...everything is being rendered except from the image
1条答案
按热度按时间ujv3wf0j1#
显示图像的代码看起来是正确的。但是,图像文件的路径可能不正确。
要修复它,请首先检查图像路径,如果路径看起来正确,请尝试记录require函数的结果,看看它是否返回任何内容:
console.log(require(
../assets/images/${product.image}
));如果require函数返回undefined,可能是您的webpack配置没有正确设置来处理图像文件。您可能需要安装一个加载器,如url-loader或file-loader,并配置您的webpack配置文件来使用它。