ホームページ >ウェブフロントエンド >フロントエンドQ&A >Vue でローカル画像を置き換える方法
Vue でローカル画像を置き換える方法
- 藏色散人オリジナル
- 2023-01-29 10:36:522481ブラウズ
ローカル イメージを置き換える Vue メソッド: 1. "" を使用してイメージを Base64 形式に変換します; 2. import を使用してイメージを導入します; 3. require を使用して動的にロードします; 4. "publicPath" と splice を導入しますパス内では、導入されたパスの動的変化を実現できれば十分です。
このチュートリアルの動作環境: Windows 10 システム、vue3 バージョン、DELL G3 コンピューター
ローカル イメージを置き換える方法ヴュー？
vue はローカル イメージを動的にロードします
今日、vue ファイルにローカル イメージを導入するという問題に遭遇したので、この記事を思いつきました。
通常、img タグの 1 つは HTML で次のように記述されます:
<img src="../images/demo.png">この記述方法では、相対パスの下の画像のみを参照できます 。絶対パスは使用できません。絶対パスを使用すると、そのようなリソースは webpack によって処理されずに直接コピーされます。
src が変数の場合、通常は動的バインディング用のデータに変数 src を設定します。
<img :src="src">//data中定义变量src
data() {
return {
src: '../images/demo.png'
}
}しかし、この時点では画像が読み込まれておらず、画像が表示されていないことがわかります。確認すると、この画像のアドレスは # であることがわかります。 ##../images/demo.png、つまり、v-bind によってバインドされた相対パスは、Webpack の file-loader によって処理されず、単純なテキストの置換のみが行われます。 。
1.画像を**base64**format
<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">に変換します。 通常、アイコンなどの画像が比較的小さい場合にこれを行うことができます。サイズは通常 10KB 以内です。 #2.
#import** を使用して画像を導入します#<img :src="src">//使用import引入
import img from '../images/demo.png'
//data中定义变量src
data() {
return {
src: img
}
}
** を使用して
<img :src="src">//data中定义变量src
data() {
return {
src: require('../images/demo.png')
}
}
4 を動的に読み込みます。**そして、インポートされたパスの動的な変更を実現するために、これをパスに接続します。#<pre class="brush:php;toolbar:false"><img :src="publicPath + &#39;images/demo.jpg&#39;" alt=""> // √
// 编译后:<img src="/foo/images/demo.jpg" alt=""><script>export default:{
data(){
return {
publicPath: process.env.BASE_URL,
}
},}</script></pre>vue.config 内.js
<pre class="brush:php;toolbar:false">//vue.config.jsmodule.exports = {
publicPath:'/foo/',
...}</pre> の構成
结论
静态资源可以通过两种方式进行处理：
- 在 JavaScript
被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理。
- 放置在
public目录下或通过绝对路径被引用。这类资源将会直接被拷贝，而不会经过 webpack 的处理。
原理
从相对路径导入
当你在 JavaScript、CSS 或 *.vue 文件中使用相对路径 (必须以 . 开头) 引用一个静态资源时，该资源将会被包含进入 webpack 的依赖图中。
在其编译过程中，所有诸如 <img src="...">、background: url(...) 和 CSS @import 的资源 URL 都会被解析为一个模块依赖。
用绝对路径引入时，路径读取的是public文件夹中的资源，任何放置在 public 文件夹的静态资源都会被简单的复制到编译后的目录中，而不经过 webpack特殊处理。
当你的应用被部署在一个域名的根路径上时，比如http://www.abc.com/，此时这种引入方式可以正常显示但是如果你的应用没有部署在域名的根部，那么你需要为你的 URL 配置 publicPath 前缀，publicPath 是部署应用包时的基本 URL，需要在 vue.config.js 中进行配置。
扩展
关于vue file-loader vs url-loader
如果我们希望在页面引入图片（包括img的src和background的url）。当我们基于webpack进行开发时，引入图片会遇到一些问题。
其中一个就是引用路径的问题。拿background样式用url引入背景图来说，我们都知道，webpack最终会将各个模块打包成一个文件，因此我们样式中的url路径是相对入口html页面的，而不是相对于原始css文件所在的路径的。这就会导致图片引入失败。这个问题是用file-loader解决的，file-loader可以解析项目中的url引入（不仅限于css），根据我们的配置，将图片拷贝到相应的路径，再根据我们的配置，修改打包后文件引用路径，使之指向正确的文件。
另外，如果图片较多，会发很多http请求，会降低页面性能。这个问题可以通过url-loader解决。url-loader会将引入的图片编码，生成dataURl。相当于把图片数据翻译成一串字符。再把这串字符打包到文件中，最终只需要引入这个文件就能访问图片了。当然，如果图片较大，编码会消耗性能。因此url-loader提供了一个limit参数，小于limit字节的文件会被转为DataURl，大于limit的还会使用file-loader进行copy。
url-loader和file-loader是什么关系呢？简答地说，url-loader封装了file-loader。url-loader不依赖于file-loader，即使用url-loader时，只需要安装url-loader即可，不需要安装file-loader，因为url-loader内置了file-loader。通过上面的介绍，我们可以看到，url-loader工作分两种情况：1.文件大小小于limit参数，url-loader将会把文件转为DataURL；2.文件大小大于limit，url-loader会调用file-loader进行处理，参数也会直接传给file-loader。因此我们只需要安装url-loader即可。
原文链接：https://www.cnblogs.com/weizaiyes/p/7461967.html
关于background url引入图片时
按照上面理论，如果我采用相对路径的方式引入图片的话，webpack会对其require处理。
background: url('./iphonexs.png') 0 0 no-repeat;实际上确实如此，我看到页面的背景变成：
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;这是根据url-loader的配置处理的结果。【推荐学习：《vue视频教程》】
或者采用动态style的方式：
<div
:style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}"></div>以上がVue でローカル画像を置き換える方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。