backgroundImage 路徑問題 vue 圖片的引入方式

自：https://blog.csdn.net/MoLvSHan/article/details/78204972
自：https://blog.csdn.net/qq_35393869/article/details/80333564

項目中圖片都放在src/img文件夾，img和background-image引用都用相對路徑，即../../這種形式

在打包build的設置路徑assetsPublicPath: ‘./‘，然后那些沒有轉成base64的背景圖都失效了，，路徑。

處理方法：
使用require引入圖片

img標簽

背景圖

<div :style="{backgroundImage:'url('+require('assets/img/common/bg.png')+')'}"></div>


        <span :style="{backgroundImage:'url('+require('../../assets/image/accounts/dayily.png')+')'}">

也可以下面這種方式去寫：

在前端開發中，background-image屬性非常常見，有很多時候需要使用內聯樣式來綁定此屬性，但是在vue-cli項目中，如果如下面代碼填寫路徑會找不到圖片

<script type="text/javascript">
	import TemplateNav from './TemplateNav'
 
	export default {
		name: 'FooterNav',
		components: {
			'TemplateNav': TemplateNav
		},
		data() {
			return {
				//使用相對路徑會找不到圖片
				shouye:'url(../../assets/images/shouye/index2x.png)',
				fenlei:'url(../../assets/images/shouye/fenlei2x.png)',
				search:'url(../../assets/images/shouye/search2x.png)',
				shopcart:'url(../../assets/images/shouye/gouwuche2x.png)',
				mine:'url(../../assets/images/shouye/I2x.png)'
			}
		},
		props: {
			num: {
				default: '0'
			}
		},
	}
</script>

正確的應該這樣寫：

data() {
	return {
		shouye:'url(' + require('../../assets/images/shouye/index2x.png') + ')',
		fenlei:'url(' + require('../../assets/images/shouye/fenlei2x.png') + ')',
		search:'url(' + require('../../assets/images/shouye/search2x.png') + ')',
		shopcart:'url(' + require('../../assets/images/shouye/gouwuche2x.png') + ')',
		mine:'url(' + require('../../assets/images/shouye/I2x.png') + ')'
	}
}

使用require()方法，require()是node.js方法

<template>
  <div class="demo">
    <!-- 成功引入的三種方法： -->
    <!-- 圖1 -->
    <div class="img1"></div>
    <!-- 圖2 -->
    <div class="img2" :style="{backgroundImage: 'url(' + bg2 + ')' }"></div>
    <!-- 圖3 -->
    <img src="~@/../static/images/logo3.png" width="100">
  </div>
</template>

<script>
import Bg2 from '@/../static/images/logo2.png'

export default {
    name: 'App',
    data () {
        return {
            bg2: Bg2,
        }
    }
}
</script>

<style>
    .demo{width: 100px;margin: 50px auto;}
    .img1{
        width: 100px;
        height: 100px;
        background: url('~@/../static/images/logo1.png') center center no-repeat;
        background-size: 100px auto;
    }
    .img2{
        width: 100px;
        height: 100px;
        background-position: center center;
        background-repeat:  no-repeat;
        background-size: 100px auto;
    }
</style>

上述代碼中，出現的諸如：~@/ 和 @/ ，如果刪除后，測試效果也正常，你也可以都去掉，不影響。

2. 錯誤的代碼，截圖對比，如下：
   

改：

<div :style="{backgroundImage: 'url(https://cn.vuejs.org/images/logo.png)', width: '400px', height: '400px'}">foo</div>

相比其他方法：
如果你用了vue-cli腳手架，在build/utils.js中找到ExtractTextPlugin位置在對象中加入這句publicPath: '../../'就行了

具體參考官方文檔：Class 與 Style 綁定

以上是網上大佬分享的 以下是我總結的

組件內可正常引入 ：（圖片要放在啥文件夾應該要了解）

css中引入：

在js中動態引入是不容易的 ：

頁面顯示為：

但是頁面上並為顯示圖片

我在組件內創建一個背景圖測試：

頁面有顯示圖片：

且圖片樣式變成了：

於是我修改js內的圖片地址：

發現圖片正常顯示了：

總結原因應該是上面的：

另外一種方法 今天突然想到了試了下成功了：

就是將圖片先引入到需要的js文件中，如何在文件中需要的位置用 ${ } 調用：

這種方法比上面的要友好太多了

今天有遇到一個圖片引入的低級錯誤：在引入背景圖片時需要當前元素有固定的寬高 不能再犯了