Why can"t my picture be displayed
<script>
},
imgsrc=""
<li><div class="divc"><img src="../../assets/1.jpg" alt=""></div><div class="adiv">
<img src="../../assets/.png" alt="" name="btn" @click="onClick" v-if="srci==="1""><img src="../../assets/2.png" @click="onClick" v-if="srci==="2""></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/2.jpg" alt=""></div><div class="adiv">
<img src="../../assets/.png" alt="" name="btn" @click="onClick" v-if="srci==="1""><img src="../../assets/2.png" @click="onClick" v-if="srci==="2""></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/3.jpg" alt=""></div><div class="adiv">
<img src="../../assets/.png" alt="" name="btn" @click="onClick" v-if="srci==="1""><img src="../../assets/2.png" @click="onClick" v-if="srci==="2""></div></li>
<li><div class="divh"></div></li>
<li><div class="divc"><img src="../../assets/4.jpg" alt=""></div><div class="adiv">
<img src="../../assets/.png" alt="" name="btn" @click="onClick" v-if="srci==="1""><img src="../../assets/2.png" @click="onClick" v-if="srci==="2""></div></li>
<li><div class="divh"></div></li>
<li class="divc2"><div class="divc"><img src="../../assets/5.jpg" alt=""></div><div class="adiv">
<img src="../../assets/.png" alt="" name="btn" @click="onClick" v-if="srci==="1""><img src="../../assets/2.png" @click="onClick" v-if="srci==="2""></div></li>
</ul>
F12src
the picture belongs to a static resource, not just a path, and should be imported as a resource
has not used vue , I believe the principle is similar
is used in react
var img1 = require('./img01.png');
var img2 = require('./img02.png');
render(){
<img src={item.type?img1:img2} />
}
Hello, landlord!
1, images can be displayed normally because they have been processed by webpack , which can also be seen in the screenshot (the resources referenced by src have become base64 ). This is because vue-loader has done the processing. You can refer to the official documentation, ide/asset-url.html-sharp%E8%BD%AC%E6%8D%A2%E8%A7%84%E5%88%99" rel=" nofollow noreferrer "> portal .
2, picture is not normal display is definitely due to path problem. It is also possible to define it in data , but use the require keyword, so that it can be processed by webpack , and the effect is the same.
< hr >
if it is helpful, please click to adopt it, thank you ~
: src= "status==1?require ('.. / img/xxx.png'): require ('.. / img/xxx.png')"
for example, use require
I seem to have encountered this before. src that dynamically changes img must be an absolute address (the ps: begins with /), and the constant can be a relative address
. You are programming for thinking or not. One question after another, your two paths are different. Take a look at where you put the picture and which list array you put the right path in
.
Hello, landlord:
if src refers to the picture directly, it can be written as'.. /.. / assets/ likes .png', for example:
the reason is what the upstairs said. The picture has been processed. If the landlord has to write the path directly, you can try to put the picture in the, (static folder in the static folder. The resources in the, (static folder will not be processed by webpack. Oh, by the way, if the landlord uses vue-cli3.0, there is no static folder, you can put it in public.
