为什么我在客户端上收到错误“无法加载资源”？

Question

我在index.cshtml页面中有这个元素：

style="background-image: url('~/assets/images/shutterstoc/img1.jpg');"

如你所见，我有样式属性。

如果我将style属性更改为：

Failed to load resource: the server responded with a status of 404 (Not Found)  img1.jpg

背景图片消失，我在网络控制台中收到此错误：

The path to the image is:
http://localhost/assets/images/shutterstoc/img1.jpg
As you can see the mySiteName is missing.

**更新*

<section class="parallax parallax-2 padding-xxs" style="background-image: url('./assets/images/img1.jpg')">

UPDATE2： 我尝试这条道路：

Failed to load resource

但我仍然得到错误。 为什么我会收到错误org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:transformDexArchiveWithExternalLibsDexMergerForDebug'. at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeA ctions(ExecuteActionsTaskExecuter.java:100) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.execute( ExecuteActionsTaskExecuter.java:70) at org.gradle.api.internal.tasks.execution.SkipUpToDateTaskExecuter.execute(Sk ipUpToDateTaskExecuter.java:63) at org.gradle.api.internal.tasks.execution.ResolveTaskOutputCachingStateExecut er.execute(ResolveTaskOutputCachingStateExecuter.java:54) at org.gradle.api.internal.tasks.execution.ValidatingTaskExecuter.execute(Vali datingTaskExecuter.java:58) at org.gradle.api.internal.tasks.execution.SkipEmptySourceFilesTaskExecuter.ex ecute(SkipEmptySourceFilesTaskExecuter.java:88) at org.gradle.api.internal.tasks.execution.ResolveTaskArtifactStateTaskExecuter.execute(ResolveTaskArtifactStateTaskExecuter.java:52) at org.gradle.api.internal.tasks.execution.SkipTaskWithNoActionsExecuter.execu te(SkipTaskWithNoActionsExecuter.java:52) at org.gradle.api.internal.tasks.execution.SkipOnlyIfTaskExecuter.execute(Skip OnlyIfTaskExecuter.java:54) at org.gradle.api.internal.tasks.execution.ExecuteAtMostOnceTaskExecuter.execu te(ExecuteAtMostOnceTaskExecuter.java:43) at org.gradle.api.internal.tasks.execution.CatchExceptionTaskExecuter.execute( CatchExceptionTaskExecuter.java:34) at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWork er$1.run(DefaultTaskGraphExecuter.java:248) at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOpe rationWorker.execute(DefaultBuildOperationExecutor.java:336) at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOpe rationWorker.execute(DefaultBuildOperationExecutor.java:328) at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultB uildOperationExecutor.java:197) at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuild OperationExecutor.java:107) at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWork er.execute(DefaultTaskGraphExecuter.java:241) at org.gradle.execution.taskgraph.DefaultTaskGraphExecuter$EventFiringTaskWork er.execute(DefaultTaskGraphExecuter.java:230) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.p rocessTask(DefaultTaskPlanExecutor.java:124) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.access$200(DefaultTaskPlanExecutor.java:80) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1 .execute(DefaultTaskPlanExecutor.java:105) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker$1 .execute(DefaultTaskPlanExecutor.java:99) at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.execute(DefaultTask ExecutionPlan.java:625) at org.gradle.execution.taskgraph.DefaultTaskExecutionPlan.executeWithTask(Def aultTaskExecutionPlan.java:580) at org.gradle.execution.taskgraph.DefaultTaskPlanExecutor$TaskExecutorWorker.r un(DefaultTaskPlanExecutor.java:99) at org.gradle.internal.concurrent.ExecutorPolicy$CatchAndRecordFailures.onExec ute(ExecutorPolicy.java:63) at org.gradle.internal.concurrent.ManagedExecutorImpl$1.run(ManagedExecutorImp l.java:46) at org.gradle.internal.concurrent.ThreadFactoryImpl$ManagedThreadRunnable.run( ThreadFactoryImpl.java:55) Caused by: java.lang.RuntimeException: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex at com.android.builder.dexing.DxDexArchiveMerger.mergeMultidex(DxDexArchiveMer ger.java:266) at com.android.builder.dexing.DxDexArchiveMerger.mergeDexArchives(DxDexArchive Merger.java:133) at com.android.build.gradle.internal.transforms.DexMergerTransformCallable.cal l(DexMergerTransformCallable.java:97) at com.android.build.gradle.internal.transforms.ExternalLibsMergerTransform.tr ansform(ExternalLibsMergerTransform.kt:121) at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTa sk.java:222) at com.android.build.gradle.internal.pipeline.TransformTask$2.call(TransformTa sk.java:218) at com.android.builder.profile.ThreadRecorder.record(ThreadRecorder.java:102) at com.android.build.gradle.internal.pipeline.TransformTask.transform(Transfor mTask.java:213) at org.gradle.internal.reflect.JavaMethod.invoke(JavaMethod.java:73) at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$Incre mentalTaskAction.doExecute(DefaultTaskClassInfoStore.java:173) at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$Stand ardTaskAction.execute(DefaultTaskClassInfoStore.java:134) at org.gradle.api.internal.project.taskfactory.DefaultTaskClassInfoStore$Stand ardTaskAction.execute(DefaultTaskClassInfoStore.java:121) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter$1.run(Ex ecuteActionsTaskExecuter.java:122) at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOpe rationWorker.execute(DefaultBuildOperationExecutor.java:336) at org.gradle.internal.progress.DefaultBuildOperationExecutor$RunnableBuildOpe rationWorker.execute(DefaultBuildOperationExecutor.java:328) at org.gradle.internal.progress.DefaultBuildOperationExecutor.execute(DefaultB uildOperationExecutor.java:197) at org.gradle.internal.progress.DefaultBuildOperationExecutor.run(DefaultBuild OperationExecutor.java:107) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeA ction(ExecuteActionsTaskExecuter.java:111) at org.gradle.api.internal.tasks.execution.ExecuteActionsTaskExecuter.executeA ctions(ExecuteActionsTaskExecuter.java:92) ... 27 more Caused by: com.android.builder.dexing.DexArchiveMergerException: Unable to merge dex at com.android.builder.dexing.DexArchiveMergerCallable.call(DexArchiveMergerCa llable.java:72) at com.android.builder.dexing.DexArchiveMergerCallable.call(DexArchiveMergerCa llable.java:36) ... 46 more Caused by: com.android.dex.DexException: Multiple dex files define Landroid/support/v4/view/accessibility/AccessibilityRecordCompatIcsMr1; at com.android.dx.merge.DexMerger.readSortableTypes(DexMerger.java:661) at com.android.dx.merge.DexMerger.getSortedTypes(DexMerger.java:616) at com.android.dx.merge.DexMerger.mergeClassDefs(DexMerger.java:598) at com.android.dx.merge.DexMerger.mergeDexes(DexMerger.java:171) at com.android.dx.merge.DexMerger.merge(DexMerger.java:198) at com.android.builder.dexing.DexArchiveMergerCallable.call(DexArchiveMergerCa llable.java:61) ... 47 more 以及如何修复错误？

Answer 1

可以在剃刀视图中使用tilda标志~来获取应用根路径。它不适用于CSS样式表文件。

当razor执行视图时，如果它找到~，它将转换为应用程序根目录路径。

只使用不带~

的路径

 background-image: url('./assets/images/shutterstoc/img1.jpg'); 

图片网址相对于样式表。因此，根据您的样式表位置和资产目录，根据需要将前缀.调整为../。

.someCssClass {
     background-image: url('./assets/images/shutterstoc/img1.jpg'); 
}

与上面提到的一样，图像位置相对于样式表的位置 。如果您在视图/页面中对样式进行硬编码，则它将相对于页面的URL。因此，虽然请求yourSiteBaseUrl/有效但yourSiteBaseUrl/Home/或yourSiteBaseUrl/Home/Index无法正常工作，即使这两条路由返回相同的操作方法和视图/页面。所以我建议不这样做。

将定义移动到css文件，并在图像位置使用正确的相对路径。然后它适用于yourSiteBaseUrl/Home/Index和yourSiteBaseUrl/Home以及yourSiteBaseUrl