JS获取修改图片地址

获取

在实际项目中，有时需要手动修改图片地址，一般可直接修改
而vue中若直接使用js修改图片地址，启动后无法返回正确地址

// 获取原src地址（不需要时，可以直接修改）
// (若使用class，则获取的是dom数组,此时需给定index以找到对应特定dom元素)

// .src获取绝对地址
const one = document.getElementsByClassName("img-one")[0].src
// getAttribute("src")获取相对地址
const temp = document.getElementsById("img-two").getAttribute("src") 

// 修改src地址
document.style.src = `url(${one})`
// 只修改div的背景图片（其他背景相关设置不变）
document.style.backgroundImage = `url(${temp})`

// ES6语法 ` ` 模板字符串(此处是将one/temp常量放入url中)

vue项目在html和css中引入的图片可正常获取地址，而在<script></script>中手动修改，项目运行后无法正常获取对应地址。

目前解决方法：在html中加入一个隐藏图片，以获取新图片的正确src，使用上述方法获取其相对/绝对地址，再赋值给src即可

// 隐藏于dom中<img>，运行后获取该<img>的src即为正确路径
// 再进行src赋值即可实现正确图片/背景更换
<img src="../../assets/image/new.png" id="temp" style="width: 0; display:none"/>

未完待续（正在寻找更好的办法。。。）