解决vuecli3中img src 的引入问题

在Vue CLI 3中，处理`img src`的引入问题主要涉及到项目中静态资源的管理。Vue CLI 3改变了之前的目录结构，导致一些在Vue CLI 2中可行的引用方式可能不再适用。以下是对这个问题的详细解答： 1. **在模板中直接引入图片资源**： 在Vue组件的模板中，你可以使用`@`或`./`来引入相对路径的图片资源。例如： ```html <img src="@/assets/fapiao.jpeg" alt="Example Image"> ``` 其中，`@`通常被设置为`src`目录的别名，而`./`则表示当前目录。这种方式适用于图片位于`src/assets`或其子目录下。 2. **将图片资源放在`static`文件夹下**： 在Vue CLI 3的默认配置中，`static`目录用于存放不经过webpack处理的静态资源。这意味着，如果你将图片放入`public/static`目录，它们会在构建后保持原样，可通过`/static`路径访问。例如： ```html <img src="/static/fapiao.jpeg" alt="Example Image"> ``` 但是，请注意Vue CLI 3并没有默认的`static`目录，你需要手动创建。在创建后，你需要确保在引用时使用绝对路径（以`/`开头）。 3. **图片资源在`assets`文件夹下**： 如果图片在`src/assets`下，需要在`data`中使用`require`来加载，这是因为webpack需要知道如何处理这些资源。例如： ```javascript export default { data() { return { img: require('@/assets/fapiao.jpeg'), }; }, }; ``` 这种方式适用于需要在JavaScript中动态加载图片的情况，如图片数组。 4. **动态绑定`img src`**： 当你需要动态地绑定`src`属性时，可以将图片的路径存储在数据对象中，并在模板中使用`v-bind`或`:src`进行绑定。例如： ```html <ul> <li v-for="(item, index) in src" :key="index"> <img :src="item" alt> </li> </ul> export default { data() { return { src: [ require('../assets/imgs/001.jpg'), require('../assets/imgs/002.jpg'), // ... ], }; }, }; ``` 5. **结合`router-link`进行页面跳转**： 如果你需要在点击图片时跳转到其他页面，可以结合`router-link`使用，同时传递地址参数。例如： ```html <ul> <li v-for="(item, index) in src" :key="index" @click="jump(item.address)"> <router-link :to="item.address" tag="li" :plain="true"> <img :src="item.img" alt> </router-link> </li> </ul> export default { data() { return { src: [ { img: require('../assets/imgs/001.jpg'), address: 'taxplayerinfo' }, // ... ], }; }, }; ``` 总结来说，解决Vue CLI 3中`img src`的引入问题，你需要根据图片的使用场景选择合适的引用方式。对于静态资源，可以考虑`static`目录；对于需要webpack处理的资源，放在`assets`并使用`require`；对于动态加载或与数据绑定的情况，可以将图片路径存储在数据对象中。同时，注意调整引用路径以匹配你的项目结构。如果遇到问题，查阅官方文档或社区中的解决方案通常是找到答案的有效途径。