使用 vue-cli 加载静态资源 3.x
Load static assets with vue-cli 3.x
我有一个具有以下目录结构的 vue-cli 3 项目设置：
所有静态资源都加载到public目录，并在localhost上编译构建成功。
如下图所示，guyana-live-logo.png、slide-1.jpg和970x250-ad.png都加载成功，但是在浏览器中只出现logo和广告图片。
我试过的
- 更改引用图像的方式。
原始 - 适用于几乎所有其他图像
<img src="/img/slide-1.jpg"/>
测试 0 - 这加载了图像并附加了哈希值（幻灯片 1。1b0ahsa.jpg）但它仍然没有出现在浏览器中
<img src="../../../public/img/slides/slide-1.jpg">
测试 1 - 使用 v-bind
<img :src="'/img/slide-1.jpg'"/>
将图像移动到 src 目录和组件子目录中 两者都被证明是徒劳的。
正在更新 vue-loader
为生产构建并仅提供 /dist 文件夹
要点
- 控制台或我的错误跟踪软件没有产生任何错误。
- 图像格式似乎不是问题，一些
.png 加载而另一些则没有，.jpg 也是如此。
- 一些 JavaScript 文件受到影响。 JS 文件被这样调用：
<script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script> in public/index.html
图像需要位于您尝试访问它们的文件的同一目录或子目录中（即在 Components 目录中）。
您是否也可以尝试通过 URL <img src="http://localhost:8080/img/guyana-live-logo.png" /> 访问图像？
这应该可行，但您可能不希望以这种方式使用它。
您可以使用的另一种可能性是：
<script>
import image from './img/slide-1.jpg'
...
然后在 Vue 中 data:
data() {
return {
img: image,
};
},
然后在你的 HTML:
<img :src="image"/>
这解决了在使用 Parcel Bundler 构建时尝试访问图像时出现的问题
我有一个具有以下目录结构的 vue-cli 3 项目设置：
所有静态资源都加载到public目录，并在localhost上编译构建成功。
如下图所示，guyana-live-logo.png、slide-1.jpg和970x250-ad.png都加载成功，但是在浏览器中只出现logo和广告图片。
我试过的
- 更改引用图像的方式。
原始 - 适用于几乎所有其他图像
<img src="/img/slide-1.jpg"/>
测试 0 - 这加载了图像并附加了哈希值（幻灯片 1。1b0ahsa.jpg）但它仍然没有出现在浏览器中
<img src="../../../public/img/slides/slide-1.jpg">
测试 1 - 使用 v-bind
<img :src="'/img/slide-1.jpg'"/>
将图像移动到 src 目录和组件子目录中 两者都被证明是徒劳的。
正在更新 vue-loader
为生产构建并仅提供 /dist 文件夹
要点
- 控制台或我的错误跟踪软件没有产生任何错误。
- 图像格式似乎不是问题，一些
.png加载而另一些则没有，.jpg也是如此。 - 一些 JavaScript 文件受到影响。 JS 文件被这样调用：
<script type="text/javascript" src="<%= BASE_URL %>js/script.js"></script>in public/index.html
图像需要位于您尝试访问它们的文件的同一目录或子目录中（即在 Components 目录中）。
您是否也可以尝试通过 URL <img src="http://localhost:8080/img/guyana-live-logo.png" /> 访问图像？
这应该可行，但您可能不希望以这种方式使用它。
您可以使用的另一种可能性是：
<script>
import image from './img/slide-1.jpg'
...
然后在 Vue 中 data:
data() {
return {
img: image,
};
},
然后在你的 HTML:
<img :src="image"/>
这解决了在使用 Parcel Bundler 构建时尝试访问图像时出现的问题