静态资源的动态引入

最新推荐文章于 2024-04-03 12:15:32 发布

沈玉☆

最新推荐文章于 2024-04-03 12:15:32 发布

阅读量349

点赞数

文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/Sandersonia/article/details/133244332

版权

本文介绍了在开发中遇到打包后图片路径变化的问题，提供了四种解决方案：1)使用import引入，每张图单独引入；2)用require动态加载；3)将静态文件放在public中，可能丢失指纹；4)动态导入结合newURL处理动态和静态部分的URL。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有常用的2种方式：
1、css中的静态路径
2、img中的src静态路径
运行的环境是打包后的图片路径，而打包后的图片通常会生成一个文件指纹，而我们在写代码时，写的是源码中的路径和文件名，如果是静态路径，则会自动转换。
在这里插入图片描述

解决方式：

1、最笨的方式：用import引入，但是每张图都需要引入

<div class="img" :style="{backgroundImage: `url(${img})`}"> 234</div>
import img from '../../assets/aesthetics.png'
export default {
  data() {
    return {
      img,
    }
  },
}

在这里插入图片描述

2、用require

<div class="img" :style="{ backgroundImage: `url(${require(`@/assets/${img}.png`)})` }"> 234</div>
data() {
	img: 'aesthetics'
}

3、静态文件放在public中，但这种丢失了文件指纹

<div class="img" :style="{backgroundImage: `url(/static/img/${img}.png)`}"> 234</div>
data() {
	img: 'aesthetics'
}

在这里插入图片描述
4、动态导入，静态文件放在public中，用 new URL
new URL() 是 JavaScript 中用于创建 URL 对象的构造函数。它可以将字符串形式的 URL 解析为一个可访问和操作的对象。
new URL() 构造函数接受两个参数：
URL 字符串：表示要解析的 URL 的字符串，且这个值必须一部分动态一部分静态。
基础 URL（可选）：表示相对 URL 的基础 URL，用于解析相对 URL 时使用。

 <div class="img" :style="{ backgroundImage: `url(${bind('aesthetics')})` }"> 234</div>
 
function bind(val) {
  var imagePath = `/static/img/${val}.png`;
  var url = new URL(imagePath, window.location.href);
  return url.pathname
}

在这里插入图片描述