‘壹’ vue中json文件怎么引入图片视频
图片文件放到static里。
引用路径写staticimgxxx打包完相对于static的路径是不变的，就可以了。希望我的回答可以帮助到你。
json文件是一种轻量级的数据交换格式，易于人阅读和编写。同时也易于机器解析和生成，JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯。
‘贰’ 怎么在uniapp、index.vue中导入图片
在uniapp、index.vue中导入图片的方法分别如下：
1、在uniapp导入图片的方法是在js中通过require() 引入图片（图片大小不能超过3kb）或在html中通过相对路径引入（绝对路径打包后图片不显示）。
2、在index.vue中导入图片的方法是先给图片地址绑定变量，在script中设置变量。直接将图片引入为模块，require imgUrl from "../assets/test.png"。即可完成图片的导入。
‘叁’ vue组件中怎么引入html文件
1、HtmlPanel.vue文件
<template><div><mu-circular-progress :size="40" v-if="loading"/><div v-html="html"></div></div></template><style></style><script>export default{// 使用时请使用 :url.sync=""传值props: {url: {required: true}},data () {return {loading: false,html: ''}},watch: {url (value) {this.load(value)}},mounted () {this.load(this.url)},methods: {load (url) {if (url && url.length > 0) {// 加载中this.loading = truelet param = {accept:'text/html,text/plain'}this.$http.get(url, param).then((response) => {this.loading = false// 处理HTML显示this.html = response.data}).catch(() => {this.loading = falsethis.html = '加载失败'})}}}}</script>
htmlViewSample.vue
?
<template><div><v-html-panel :url.asyc="url1"></v-html-panel><v-html-panel :url.asyc="url2"></v-html-panel></div></template><style scoped>div{color:red}</style><script>export default{data () {return {url1: '',url2: ''}},mounted () {this.url1 = 'http://file.xxx.com/group1/M00/0C/F5/xxxxxxxx.html'this.url2 = 'http://file.xxx.com/group1/M00/0D/3B/yyyyyyy.html'},methods: {}}
</script>
2、效果图
3、注意事项：
直接使用axios处理的GET请求，需要处理跨域；
外部的css样式会作用到显示的html；
同时加载的外部html里的script也可能会执行，需要按需处理下；
外部HTML文件内部的相对路径将不会被自动识别，绝对路径可以。
‘肆’ 在vue项目开发中, 为什么图片要用require 引入。。。而不是直接写本地路径
使用require定义之后，你就可以动态使用了，不用require你就只能写死的。
不用 :src="'../img/image.jpg'" 会被解析为字符串
<imgsrc="../img/image.jpg">//正常加载
<img:src="'../img/image.jpg'">//动态地址，路径被加载器解析为字符串，图片找不到
使用
src1：require('../img/image1.jpg'),
src2：require('../img/image2.jpg'),
index:1,<img:src="index=0?src1:src2">//动态地址，正常加载
‘伍’ 解决vuejs项目里css引用背景图片不能显示的问题
解决：build->utils.js里，修改：增加
publicPath:'../../',
if
(options.extract)
{
return
ExtractTextPlugin.extract({
use:
loaders,
publicPath:'../../',
fallback:
'vue-style-loader'
})
}
else
{
return
['vue-style-loader'].concat(loaders)
}
以上这篇解决vuejs项目里css引用背景图片不能显示的问题就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
您可能感兴趣的文章:解决vue打包之后静态资源图片失效的问题解决vue打包css文件中背景图片的路径问题详谈vue+webpack解决css引用图片打包后找不到资源文件的问题vue
cli使用绝对路径引用图片问题的解决关于Vue背景图打包之后访问路径错误问题的解决
‘陆’ vue从后台获取的数据有html标签通过v-html渲染到页面，然后怎么给这里面的html添加样式
vue从后台获取的数据有html标签通过v-html渲染到页面给html添加样式的方法如下：
准备材料：Vue.js、HBuilder、浏览器
1、创建静态页面vhtml.html，并引入vue.js文件。
‘柒’ Vue项目设置背景图片，但是由于不同浏览器的分辨率问题导致背景图片大小显示有误，请问该如何解决
设置width和height 百分比
‘捌’ vue中静态js文件怎么打包
1.问题描述
在项目开发中,当我们通过npm run build打包之后将文件放在服务器上时通常会出现图片失效问题,控制台中提示某个图片没有找到（404错误），这些图片可以是以src引入的图片， 也可以是css中定义的背景图片。图片能否显示与你的静态资源文件存在位置和引入
的路径直接相关，下面是我的其中一个项目的文件存放以及路径书写方式！
2.解决方法之一
静态资源static存放位置放在src目录下
以上是一种解决图片失效问题的方法，当然，如果非要把static静态资源目录放在与src同级目录下，也是有解决方法，例如通过导入图片的方式（本人未实践），可以自行尝试！
‘玖’ vue.js里面怎么引入font-icon
font-icon是用css来引入的 而vue.js是js框架 你应该在css中引入font-icon 在vue的html文件中引入css就可以了