Vue에서 로컬 이미지를 바꾸는 방법
- 藏色散人원래의
- 2023-01-29 10:36:522432검색
로컬 이미지를 바꾸는 Vue 방법: 1. ""를 통해 이미지를 base64 형식으로 변환합니다. 2. 가져오기를 사용하여 이미지를 도입합니다. 3. require를 사용하여 동적으로 로드합니다. 4. "publicPath"를 도입하고 경로에 연결합니다. 달성하려면 경로에 동적 변화를 도입하세요.
이 튜토리얼의 운영 환경: Windows 10 시스템, vue3 버전, DELL G3 컴퓨터
로컬 이미지를 Vue로 바꾸는 방법은 무엇입니까?
vue는 로컬 이미지를 동적으로 로드합니다
오늘 vue 파일에 로컬 이미지를 삽입하는 데 문제가 발생하여 이 기사를 생각해냈습니다.
일반적으로 img 태그 중 하나는 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에서 처리되지 않으며 단순 텍스트 교체만 수행됩니다. ../images/demo.png ，也就是说通过v-bind形式绑定的相对路径不会被webpack的file-loader处理，只会做简单的文本替换。
那怎么办呢？
解决方法
1、将图片转**base64**格式
<img src="data:image/png;base64,iVBYKIGloxxxxxxxxxxxxxxxxxxx...">一般图片比较小的可以这么做，比如图标icon等，大小一般在10KB以内的。
2、使用**import**引入图片
<img :src="src">//使用import引入
import img from '../images/demo.png'
//data中定义变量src
data() {
return {
src: img
}
}3、使用**require**动态加载
<img :src="src">//data中定义变量src
data() {
return {
src: require('../images/demo.png')
}
}4、引入**publicPath**并且将其拼接在路径中，实现引入路径的动态变动
<img :src="publicPath + 'images/demo.jpg'" alt=""> // √
// 编译后:<img src="/foo/images/demo.jpg" alt=""><script>export default:{
data(){
return {
publicPath: process.env.BASE_URL,
}
},}</script>在vue.config.js中配置publicPath
우리는 어떻게 해야 할까요?
해결책
base64**🎜format🎜🎜🎜//vue.config.jsmodule.exports = {
publicPath:'/foo/',
...}🎜아이콘 등 일반적으로 작은 그림에 대해 수행할 수 있으며 크기는 일반적으로 10KB 이내입니다. 🎜
🎜2. 🎜**가져오기**🎜사진 소개🎜🎜🎜
background: url('./iphonexs.png') 0 0 no-repeat;🎜🎜3를 사용하세요. 🎜**require**🎜동적 로딩🎜🎜🎜
background: url(/resources/dist/images/iphonexs.a25bee7.png) 0 0 no-repeat;🎜
🎜4 🎜**publicPath**🎜를 도입하세요. 경로에 연결하여 도입된 경로🎜🎜🎜
<div
:style="{'background': 'url(' + require('./iphonexs.png') + ') 0 0 no-repeat'}"></div>🎜vue.config.js에서 publicPath구성>를 동적으로 변경하세요. 경로: 🎜🎜rrreee🎜
结论
静态资源可以通过两种方式进行处理：
- 在 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!