Article Directory
My source code:
The src in img or el-avatar does not provide a static value, but binds a dynamic variable. If the path of this variable is stored in assets, the image will fail to load.
1. Images are stored in assets
If the image is stored in assets, only a static path can be specified.
- Specify a static path
It can be loaded successfully:
check the picture to get it, it is to directly load a binary file
- Specifying the dynamic path
failed to load the image directly
. Check the way to obtain the image. The url splicing method is used. Obviously, it is impossible to find this place, because the project packaged by webpack does not have the assets folder, only the static folder, npm run dev After packaging and running, only the static directory will be parsed, not the assets directory.
2. Images are stored in static
It is also reasonable to directly use relative path access
to directly obtain
the source of the image, because there will be a static folder in the npm packaged project.
3. Other points that need attention
1. El expressions cannot be used in tags. <img :src="{
{ scope.row.photo }}" />这样是错的
2. Only static strings can be transmitted inside require() <img :src="require('@/assets/xxx.png')"/>这样是对的. It is wrong to transmit a variable.
3. Summary: If you need a label to dynamically display pictures, put it in static and don't use the assets directory
The reason is that the asset file will be directly packaged into the project, and the static file will become a folder independently after packaging. If a file is dynamically imported, the default path access method after packaging is adopted, so it can only be accessed after packaging. The existing static folder. The asset file can only be used directly and statically, because once it is used statically, it will be loaded into the project package by default, so what you see in the inspector is the binary directly obtained from the source file