vue中img src 动态加载本地json的图片路径写法

在Vue.js应用中，我们经常需要动态加载图片，特别是在处理数据源时，这些数据源可能包含图片路径。本文将深入探讨如何在Vue中使用`img`标签的`src`属性动态加载本地JSON文件中存储的图片路径。 重要的一点是，无论是本地JSON文件还是其中的图片URL，它们都应该放在`static`文件夹内。这是因为Vue CLI或Webpack等构建工具默认将`static`文件夹视为静态资源，其内容不会经过编译或打包过程，可以直接通过URL访问。 假设我们有一个名为`major_info.json`的文件，其中包含图片路径字段，如以下示例所示： ```json { "items": [ { "type": "WMS", "imagePath": "world.jpg" }, { "type": "WFS", "imagePath": "wfs.jpg" }, { "type": "tool", "imagePath": "tool.jpg" } ] } ``` 在Vue组件中，我们可以使用`v-bind`（简写为`:src`）来动态绑定`img`标签的`src`属性。为了获取JSON文件中的图片路径，我们可以创建一个方法，根据传入的类型返回相应的图片路径。例如： ```html <template> <div> <div v-for="item in items" :key="item.type"> <img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" /> </div> </div> </template> <script> export default { data() { return { items: [] }; }, methods: { async fetchData() { const response = await fetch('major_info.json'); this.items = await response.json(); }, getThumb(type) { let thumb = { WMS: require('@/assets/img/world.jpg'), WFS: require('@/assets/img/wfs.jpg'), tool: require('@/assets/img/tool.jpg') }; return thumb[type]; } }, async created() { await this.fetchData(); } }; </script> ``` 在这个例子中，`fetchData`方法用于从`major_info.json`文件获取数据并将其分配给`items`数组。然后，`getThumb`方法根据`item.type`返回对应的图片路径。需要注意的是，由于图片路径是在运行时动态加载的，所以我们需要使用`require`函数，并且路径前要加上别名`@/assets/img`，这里的`@`别名通常指向`src`目录。 如果图片路径是固定的，可以直接在`src`属性中写入图片的完整路径，如： ```html <img class="thumb" width="200px" height="150px" src="@/assets/img/world.jpg" /> ``` 为了使`@`别名生效，我们需要在`webpack`配置文件（通常是`vue.config.js`或`webpack.config.js`）中设置别名，例如： ```javascript module.exports = { // ... configureWebpack: config => { config.resolve = { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), 'assets': path.resolve(__dirname, '../src/assets'), 'img': resolve('static/img'), '%': resolve('./static') } }; }, // ... }; ``` 这里，我们为`@`、`assets`、`img`和`%`设置了别名，使得在代码中可以便捷地引用这些路径。 总结起来，Vue中动态加载本地JSON文件中的图片路径，需要确保JSON文件和图片都在`static`目录下，然后在Vue组件中使用`v-bind`和`require`函数结合动态方法来实现图片的动态加载。同时，记得在webpack配置中设置正确的路径别名以简化路径引用。这不仅可以提高代码的可读性和可维护性，也能避免因相对路径问题导致的404错误。