In vue, I often encounter the problem that the img tag is not displayed. I have encountered two types, both of which are caused by webpack packaging, which leads to the path not being found, so it is unrealistic. Summarize a few problems that can solve the problem that the path of the
local image cannot be displayed :
1. Put the picture in the static folder at the same level as src.
2. Put the picture on the cdn, save the network address in imgUrl, and then display it directly.
3. Put the picture in the assets folder, and then require the picture in the data
Here's how some code is written
Scenario 1: In the template,
<img :src='imgSrc'>,
<script>
export default {
data(){
imgSrc: require('本地图片路径')
}
}
</script>
require is a way to import local images, and webpack packaging can also find the correct image path
Case 2: in template
<div v-html='imgSrc'></div>
<script>
export default {
data(){
imgSrc: '<img src="图片放在public或者static下的路径">'
}
}
</script>
Because after webpack is packaged, the path of the picture has changed, and the picture under the normal src cannot be displayed, so you can put the picture in public or static, and it can be displayed when the project is running. If it is a development environment, it is normally placed in the public folder