VUE failed to bind the image address like this.

get an address from JSON that points to a picture in the local src/assets directory. It cannot be displayed when the obtained address object is placed in .

part of this component in vue:

<div class="contactcells">        
    <div class="contactcell" v-for="contactinfo in contacts">
        <router-link :to="{path:"/details",query:{contactid:contactinfo}}">    
            <div id="contactunit">
                <!--  -->
                <!-- jsonstatic/data.json -->
                <div class="contactcellimg">
                     <img :src="contactinfo.headerimg">
                </div>
                <div class="contactcellname">
                    {{contactinfo.name}}
                </div>
            </div>
        </router-link>
    </div>        
</div>

but the picture cannot be displayed correctly when it is displayed,

html code in browser:

<img src="../assets/image/zxl.jpg">

am I missing a step?

Mar.01,2021

the simpler method is handled separately in js this field contactinfo.headerimg = require (contactinfo.headerimg)


Don't put the data (pictures) in the assets file. This is a webpack configuration problem

your data is fine. It changes when rendering
you can put it under the static file


try require (".. / assets/image/zxl.jpg")


any code that determines the path in js on the browser side, where the path address should be an absolute path reference static, or use require to import the corresponding resources in advance.


when you encounter such a problem, first check whether network loads images. [problem troubleshooting]
use absolute paths instead of relative paths [problem solving]

Menu