vue中img src 动态加载本地json的图片路径写法
目录：
注意：本地json文件和json文件里的图片地址都必须写在static 静态文件夹里；否则json文件里的url地址找不到。
major_info.json文件里的图片路径写法
页面通过v-bind的方式加载：
PS：vue中图片src路径赋值
vue中引入static文件夹中图片，本以为src中直接写入图片所在路径即可，结果发现图片无法显示，控制台报404错误，图片无法找到。网上找到解决方案，在此mark一下，以便以后查询。
图片src路径动态赋值
<img class="thumb" width="200px" height="150px" :src="getThumb(item.type)" />
<script>
...
methods: {
getThumb(type) {
let thumb = {
WMS: require("img/world.jpg"),
WFS: require("img/wfs.jpg"),
tool: require("img/tool.jpg")
};
return thumb[type];
}
}
...
</script>
img为设置的路径别名
...
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')
}
},
...
固定路径
如果是固定路径的话:
<img class="thumb" width="200px" height="150px" src="/static/img/world.jpg" />
总结
以上所述是小编给大家介绍的vue中img src 动态加载本地json的图片路径写法，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧！
-
问题内容： 如何从库本身中获取共享库的路径？ 换句话说，假设使用来加载库X ，如何从库本身内部访问用于加载所述库的路径？ 请注意，我不能首先将这个库加载到该库中。 更新： 这是使用静态变量的方法： 问题答案： 动态链接器实际上搜索几个位置以找到每个动态库。其中包括（来自man ld.so）： 环境变量给定的路径 烘焙到二进制文件中的路径将加载条目下的库 缓存文件/etc/ld.so.cache /
-
问题内容： 我正在尝试在正在制作的购物车中显示图像，但没有显示出来。我必须导入每个图像吗？我知道我的路径很好，因为它以前可以工作。我认为我的product.js文件中可能有问题，但我无法弄清楚。 这是我的Product.js 数据来自此product.js 我正在提取所有数据，但图像没有显示 问题答案： 假设您使用的是webpack，则需要导入图像以使其像 现在您的图像数据是动态的，直接指定导入路
-
本文向大家介绍php 替换文章中的图片路径,下载图片到本地服务器的方法，包括了php 替换文章中的图片路径,下载图片到本地服务器的方法的使用技巧和注意事项，需要的朋友参考一下 php 替换文章中的图片路径，下载图片到本地服务器 以上这篇php 替换文章中的图片路径,下载图片到本地服务器的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持呐喊教程。
-
本文向大家介绍vue addRoutes路由动态加载操作，包括了vue addRoutes路由动态加载操作的使用技巧和注意事项，需要的朋友参考一下 需求：增加权限控制，实现不同角色显示不同的路由导航 思路：每次登陆后请求接口返回当前角色路由 核心方法：vue-router2.2.0的addRoutes方法 + vuex 以下是我实现的获取菜单路由的方法，我将该方法的调用放在首页组件的生命钩子中，即
-
本文向大家介绍Android用RecyclerView实现动态添加本地图片，包括了Android用RecyclerView实现动态添加本地图片的使用技巧和注意事项，需要的朋友参考一下 本文介绍了Android用RecyclerView实现动态添加本地图片，分享给大家，具体如下： 本文所用的多图选择的library来自：https://github.com/lovetuzitong/MultiIma
-
本文向大家介绍PhotoSwipe异步动态加载图片方法，包括了PhotoSwipe异步动态加载图片方法的使用技巧和注意事项，需要的朋友参考一下 在开发搜房家居M站的时候，搜房家居装修效果图相册展示效果需要用到PhotoSwipe插件来显示图片。 特点： 1. 家居提供的接口，每次只能获取一张图片 2. 装修效果图的张数不限。 3. 从PhotoSwipe用法来看，在PhotoSwipe初始化前必须