『壹』 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就可以了