vue中图片不显示问题 - vue中静态资源加载

文章目录

vue中图片不显示问题

静态资源

  • 在 JavaScript 被导入或在 template/CSS 中通过相对路径被引用。这类引用会被 webpack 处理后再输出到打包后的文件。
  • 放置在 public(static)目录下或通过绝对路径被引用。这类资源将会直接被拷贝到打包后的文件 ,而不会经过 webpack 的处理。
    config.jsbuild.assetsPublicPath build.assetsSubDirectory中设置
js 复制代码
// config/index.js
module.exports = {
  // ...
  build: {
    assetsPublicPath: '/',
    assetsSubDirectory: 'static'
  }
}

URL 转换规则

  • 如果URL是一个绝对路径如/panda.png,则该路径会被保留
  • 如果URL以.开头,会被理解为相对路径,并基于目录结构进行解析。没有前缀的URL, 如assets/logo.png 将会被看成相对URL,并且转换成./assets/logo.png。例如,url(./image.png) 会被翻译为 require('./image.png')
  • 如果URL以@开头,也会作为一个模块请求被解析。Vue CLI 默认会设置一个指向 /src 的别名 @。(仅作用于模版中)

webpack 静态资源处理

*.vue组件中,所有的templatescss都会被vue-html-loadercss-loader解析,寻找资源的URL

在JavaScript里获取资源路径

为了能让Webpack返回正确的资源路径,使用require('./relative/path/to/file.jpg'),由file-loader进行解析,然后返回处理过的URL

图片不显示问题

问题描述

直接传地址是可以正常显示的

js 复制代码
<img src="./assets/tile.jpg" alt="">

但很多需求不允许直接传递。比如父组件往子组件传递图片地址等。然后发现使用变量传递字符串后图片不显示。

js 复制代码
/* 错误写法 */
// js
const imgSrc = './assets/tile.jpg'

//template
<img :src="imgSrc"></img>


原因

根据结果来看,相对地址没有被解析。在webpack中会将图片来当做模块来用,因为是动态加载的,所以url-loader将无法解析图片地址(被webpack解析到的路径都会被解析为/static/img/[filename].png)

解决办法1:使用require引入

正确的引入方法

使用require引用后,由file-loader进行解析,然后返回处理过的URL

js 复制代码
const img_src = require('../../assets/images/panda.png');
console.log(img_src); // 打印 ./assets/images/panda-aad48f9a4cf0f953ccb4af0ad32bd3cc.png

<img :src="imgSrc"></img>

使用require的错误引入方法

js 复制代码
<img :src="require(imgSrc)"></img>

这里的错误原因理解的是动态绑定src,img_src被理解为变量,而require没有被理解为变量。src去读取img_src变量的值,该变量的值就是一个字符串,所以最后显示的是字符串没有解析地址去获取图片。

require is not defined

vue3+typeScript使用require方法引入图片的时候会报错require is not defined

因为requirewebpack提供的一种加载能力,但是vue3项目时搭配vite的,所以这里应该用vite提供的静态资源载入方法,

vite官网的静态资源载入方法

import.meta.url 是一个 ESM 的原生功能,会暴露当前模块的 URL。与原生的 URL 构造器 组合使用,在一个 JavaScript 模块中,通过相对路径我们就能得到一个被完整解析的静态资源 URL

js 复制代码
// js
const img_src = new URL("./assets/tile.jpg", import.meta.url).href
//img_src: http://127.0.0.1:5173/src/assets/tile.jpg 
//import.meta.url: http://127.0.0.1:5173/src/App.vue?t=1706082462328
console.log(img_src,import.meta.url)


//template
<img :src="img_src" alt="">
解决办法2:使用import引入

打印tile的结果是/src/assets/tile.jpgimport引入后地址由相对路径变成了绝对路径,webpack不会对绝对路径进行处理。

require是在运行时加载,import是编译时加载

js 复制代码
// js
import tile from "./assets/tile.jpg";
console.log(tile)

//template
<img :src="tile" alt="">
解决办法3:将图片放进公共文件夹static或public

1.将图片放进公共文件夹static或public

2.然后使用绝对路径引入

相关推荐
前端小巷子几秒前
web从输入网址到页面加载完成
前端·面试·浏览器
江城开朗的豌豆1 分钟前
Vue路由动态生成秘籍:让你的链接'活'起来!
前端·javascript·vue.js
晓得迷路了1 分钟前
栗子前端技术周刊第 88 期 - Apache ECharts 6.0 beta、Deno 2.4、Astro 5.11...
前端·javascript·echarts
江城开朗的豌豆7 分钟前
在写vue公用组件的时候,怎么提高可配置性
前端·javascript·vue.js
江城开朗的豌豆7 分钟前
Vue路由跳转的N种姿势,总有一种适合你!
前端·javascript·vue.js
江城开朗的豌豆8 分钟前
Vue路由玩法大揭秘:三种路由模式你Pick谁?
前端·javascript·vue.js
江城开朗的豌豆9 分钟前
Vue路由守卫全攻略:给页面访问装上'安检门'
前端·javascript·vue.js
小磊哥er15 分钟前
【前端工程化】前端组件模版构建那些事
前端
前端 贾公子16 分钟前
monorepo + Turborepo --- 开发应用程序
java·前端·javascript
江城开朗的豌豆21 分钟前
Vue路由传参避坑指南:params和query的那些猫腻
前端·javascript·vue.js