मैं स्प्रिंग बूट और थाइमेलीफ का उपयोग करके एक खेल ई-कॉमर्स वेबसाइट बना रहा हूं और उत्पाद पृष्ठ के सूचकांक में और किसी विशेष उत्पाद के संपादन पृष्ठ में, मैं उत्पाद की छवि नहीं देख सकता। उत्पाद पृष्ठ का संपादन (Chrome पर निरीक्षण) इस प्रकार दिखता है
उत्पाद संपादित करने के लिए HTML कोड यहां दिया गया है। वर्तमान छवि के नीचे की रेखा वह है जो संपादन और अनुक्रमणिका दोनों के लिए त्रुटि उत्पन्न करती है।
<div class="form-group">
<label for="">Image:</label>
<input type="file" class="form-control" th:name="file" th:id="file">
<img class="mt-2" src="#" alt="" id="imgPreview1">
<br><br>
<label for="">Current image:</label>
<img style="width: 100px;" th:src="@{'media/'+${product.image}}">
</div>
मुझे अपने मीडिया फ़ोल्डर से src/main/resource/static/media में छवि मिलती है और मुझे डेटाबेस से उत्पाद का नाम मिलता है। डेटाबेस से छवि फ़ाइल का नाम लाने में कोई त्रुटि नहीं है। यह एक पथ त्रुटि की तरह दिखता है लेकिन मैं इसे समझ नहीं पा रहा हूं।
2 जवाब
आपका HTML
या JSP
पेज हमेशा ../resources/templates/
में होता है और आपका इमेज पाथ ../resources/static/media/
होता है। static
फ़ोल्डर से छवि प्राप्त करने के लिए आपको templates
फ़ोल्डर से ../
का उपयोग करके वापस जाना होगा और media
फ़ोल्डर में जाना होगा और छवि प्राप्त करनी होगी...
परिवर्तन:
../resources/static/media/liverpool_21_22_home_kit.jpg
प्रति:
../media/liverpool_21_22_home_kit.jpg
स्प्रिंग बूट में, पृष्ठ "टेम्पलेट्स" फ़ोल्डर के अंतर्गत खोजे जाते हैं और संसाधनों को डिफ़ॉल्ट रूप से "स्थिर" फ़ोल्डर के अंतर्गत मैप किया जाता है। स्थिर फ़ोल्डर के अंतर्गत किसी छवि फ़ाइल तक पहुँचने के लिए, प्रयास करें
/image-path/image.ext
उदाहरण के लिए, मेरे पास स्थिर के तहत एक स्रोत फ़ोल्डर है और इसमें कुछ छवि है, logo.png फिर,
/src/logo.png