也就是说，静态结构时，图片地址这样设置就可以正常显示：
而动态结构时，这样就不行
注意如果写成了
那就更加的错误了
这是因为网页会把根域作为相对路径的根目录，然而我们文件的路径是相对于项目文件的根目录的，当然就找不到了。而通过vue-cli建的文件结构中，有一个叫做static的文件夹，是存放静态文件的，这个文件夹下的文件会按照原本的结构放在网站根目录下。这时再使用‘/static.......’这样的路径就可以访问这些静态文件了。
第二种办法是使用require()包裹相对路径
html部分：
js部分：
下面的JS代码可以动态修改图片地址，以显示一张新的图片，实际上是通过修改图片的src属性来实现的<!DOCTYPE html>
<html>
<head>
<script>
function changeSrc()
{
document.getElementById("myImage").src="hackanm.gif"
}
</script>
</head>
<body>
<img id="myImage" src="compman.gif" width="107" height="98">
<br><br>
<input type="button" onclick="changeSrc()" value="Change image">
<p><b>Note:</b>The src property can be changed at any time.
However, the new image inherits the height and width
attributes of the original image,
if not new height and width properties are specified.</p>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）