图片路径的基本概念
引用图片的两种方式
- 相对路径：直接在模板中使用相对路径引用图片。
- Webpack语法：使用
require或import语法来引用图片。
相对路径引用
<template>
<img src="./assets/image1.jpg" alt="Image 1">
</template>
使用Webpack语法引用
对于更复杂的路径或者动态路径，你可以使用require或import语法。以下是一个使用require的示例：
<template>
<img :src="imageSrc" alt="Dynamic Image">
</template>
<script>
export default {
data() {
return {
imageSrc: require('@/assets/image2.jpg')
}
}
}
</script>
在这个例子中，@/是Vue CLI项目中常用的别名，它指向src/目录。
跨目录引用
<template>
<img :src="imageSrc" alt="Cross Directory Image">
</template>
<script>
export default {
data() {
return {
imageSrc: require('@/components/path/to/image3.jpg')
}
}
}
</script>